React Router：查询参数匹配？

Question

根据的已接受答案，React Router 4 不再匹配查询参数。如果我从与我的 <Route> 之一匹配的 URL 到具有不同查询字符串的相同 URL，内容似乎没有改变。我相信这是因为在匹配相同 <Route> 的 URL 之间导航不会更改内容，但如果我错了请纠正我。鉴于此，我如何将 React Router 用于仅需要查询参数不同的一组 URL？

例如，许多搜索引擎和其他使用搜索栏的网站（包括我正在处理的网站）都使用查询参数，通常为 q 或 query。用户可能会搜索一件事，然后决定这不是 he/she 想要的并搜索另一件事。用户可以输入第二个 URL 或再次使用搜索栏搜索。 URL 路径中实际上没有搜索词的位置，因此需要将其放入查询字符串中。我们如何处理这种情况？

有没有办法通过 React Router 将 link 变为 URL 仅查询字符串不同并更改内容，而不刷新整个页面？ 最好，除了 React 和 React Router 之外，这不需要任何外部库。

Answer 1

尝试 render function prop 而不是 Route 的 component 道具。像这样：

<Route render={props => {
  // look for some param in the query string...
  const useComponentA = queryStringContains('A');
  if(useComponentA) {
    return <ComponentA {...props}/>;
  } else {
    return <ComponentB {...props}/>;
  }
}}/>

Answer 2

有两种方法可以做到这一点：

1）在react组件中使用location.search获取查询字符串，然后将其传递给子组件，以防止重新渲染整个组件。 React-router 对此有 the official example。

2) 定义一个路由的正则表达式路径来捕获查询字符串，然后将其传递给反应组件。以分页为例：

routes.js，路由器配置可以参考this

const routerConfig = [
  {
    path: '/foo',
    component: 'Foo',
  },
  {
    path: '/student/listing:pageNumber(\?page=.*)?',
    component: 'Student'
  },

Student.js

  render() {
    // get the page number from react router's match params
    let currentPageNumber = 1;
    // Defensive checking, if the query param is missing, use default number.
    if (this.props.match.params.pageNumber) {
      // the match param will return the whole query string, 
      // so we can get the number from the string before using it.
      currentPageNumber = this.props.match.params.pageNumber.split('?page=').pop();
    }
    return <div> 
             student listing content ...
             <Pagination pageNumber = {currentPageNumber}> 
           </div>
  }

Pagination.js

render() {
    return <div> current page number is {this.props.pageNumber} </div>
  }

第二个解决方案更长但更灵活。其中一个用例是服务器端渲染：

除了反应组件，应用程序的其余部分（例如预加载的 saga）需要知道 url 包括查询字符串以进行 API 调用。

React Router：查询参数匹配？

React Router: Query Param Match?

html5-history

reactjs

react-router

react-router-v4