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

Question

根据这个问题的公认答案，React路由器4不再匹配查询参数。如果我从一个与我的＜code＞匹配的URL

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

使用React Router，是否有一种方法可以链接到一个仅在查询字符串中不同的URL，并更改内容，而不刷新整个页面？最好，除了React和React Router之外，这不需要任何外部库。

Answer 1

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

1）使用location.search在react组件中获取查询字符串，然后将其传递给子组件，以防止重新渲染整个组件。React-router有这方面的官方示例。

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

路线。js，对于路由器配置，您可以参考

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

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

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

Answer 2

尝试＜code＞渲染

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