更改位置描述符传递给<link />组件？

Question

我有一个React应用程序，其中包含使用react-routers链接组件的各种组件。

假设我想在我的应用程序生成的所有链接中添加查询参数。有没有办法改变从1个单一位置传递给Link（to = {}）的所有位置描述符？

Answer 1

您可以创建自己的链接组件来执行此操作。除了我要解决的问题之外，还有更多的考虑因素，但基本的想法是包装<Link>组件并操纵传递给组件的to道具。

const QueryLink = ({ to, ...rest }) => {
  // ensure that you have a location object
  to = typeof to === 'string' ? { pathname: to } : to
  // update the query object with whatever params you'd like
  to.query = Object.assign({}, to.query, {
    thisWillAlwaysBeAdded: true
  })
  return <Link {...rest} to={queryTo} />
}

然后，您可以在以前使用<Link>的任何地方使用查询注入链接组件。如果有location.search或to是一个带有search字符串的字符串，则不会考虑这一点，但这是一般的想法。