Question

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

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

有没有办法，使用React Router，链接到只在查询字符串中有所不同的URL并更改内容，而不刷新整个页面？最好不要求任何除了React和React Router之外的外部库。

Answer 1

尝试使用render function prop代替component Route道具<Route render={props => { // look for some param in the query string... const useComponentA = queryStringContains('A'); if(useComponentA) { return <ComponentA {...props}/>; } else { return <ComponentB {...props}/>; } }}/>。像这样：

{{1}}

Answer 2

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

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

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

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>
  }

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

除react组件外，其余应用程序（例如预装的saga）都需要知道网址（包括查询字符串）才能进行API调用。

反应路由器：查询参数匹配？

2 个答案: