Question

我想在查询字符串中保留locale=en-US，即使在路由之间导航也是如此。我希望我的其余代码对locale=en-US查询字符串值一无所知，并在使用<Link>时自动传递它。我怎么能这样做？

Answer 1

要实现此目的，您可以将以下对象传递给Link to道具：

pathname：表示链接路径的字符串。
query：键的对象：要进行字符串化的值对。
hash：放入网址的哈希，例如＃A-散列。

然后你可以编写一个组件来读取和解析来自window.location.href的查询字符串并渲染Link。

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#link

Answer 2

我了解到React Router没有提供开箱即用的功能，但是可以按照@ michal-cumpl的建议创建自定义Link组件，如下所示：

import { Link as ReactRouterLink } from 'react-router'
import React, { Component } from 'react'
import merge from 'merge'
import url from 'url'

const QUERY_PARAMS_TO_PRESERVE = ['locale', 'foo', 'bar']

const makeToObj = (to, query) => {
  if (typeof to === 'string') {
    const u = url.parse(to, true)
    to = {
      pathname: u.pathname,
      query: u.query,
      hash: u.hash,
    }
  }

  if (to.query) {
    to.query = merge(query, to.query)
  } else {
    to.query = query
  }

  return to
}

class Link extends Component {
  render() {
    const currentQuery = url.parse(window.location.href, true).query
    const queryToPreserve = {}
    QUERY_PARAMS_TO_PRESERVE.forEach(x => queryToPreserve[x] = currentQuery[x])

    const to = makeToObj(this.props.to, queryToPreserve)

    return (
      <ReactRouterLink to={to}>
        {this.props.children}
      </ReactRouterLink>
    )
  }
}

export { Link }
export default Link

请注意，当使用与React Router集成的第三方工具时会出现这种情况，例如react-router-bootstrap＆＃39; LinkContainer。

如何在React Router中的路由之间保留单个查询字符串值？

2 个答案: