reactjs - react 路由器 : Query Param Match?

Question

根据已接受的答案this question ，React Router 4 不再匹配查询参数。如果我从与我的 <Route> 之一匹配的 URL 访问使用不同的查询字符串访问相同的 URL，内容似乎没有改变。我相信这是因为在匹配相同 <Route> 的 URL 之间导航内容不做改动，如有错误请指正。鉴于此，我如何将 React Router 用于一组仅需要通过查询参数进行区分的 URL？

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

有没有一种方法，使用 React Router 链接到仅在查询字符串中不同的 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}/>;
  }
}}/>