反应路由器不匹配查询字符串

Question

我的路线定义如下：

 <Router history={browserHistory}>
   <Route path="/" component={App}>
     <Route path="experiments">
       <IndexRoute component={Experiments} />
     </Route>
     <Route path="*" component={NoMatch}/>
   </Route>
 </Router>

当我访问 时/experiments，事情按预期工作，并呈现了 Experiments 组件。但是，当我手动输入带有查询参数的 URL 时，例如：/experiments?offset=50，路由不匹配！

但是当我使用 导航时<Link to={{ pathname='/experiments', query={offset:50} }} />，事情按预期工作。实验组件已呈现并this.props.location.query.offset设置为50。

当手动输入（或复制粘贴）带有查询字符串的 URL 时，如何使路由匹配？

似乎 route 应该自动匹配url-with-query-??string-not-matching-??react-router-route，但它似乎对我不起作用。

编辑： 我将问题缩小到包罗万象的路线 path="*"。当我删除这条路线时，一切正常（例如，当我访问时/experiments?offset=50）。但是，当存在全能 Route 时，即使它位于优先级列表的底部，也不会匹配任何路由。

Answer 1

当您手动输入路线时，您需要使用historyApiFallbackwithhistory={browserHistory}来加载路线。

所做historyApiFallback的就是让您的服务器返回index.html您尝试访问的任何 URL，并且由于您的路由随后已配置，index.html因此您可以直接访问任何路由 url

在你的webpack中添加

devServer: {
    historyApiFallback: true;
}