reactjs - React-router 与查询字符串不匹配

Question

我的路线定义如下:

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

当我访问/experiments时，事情按预期进行，并且实验组件被渲染。但是，当我手动输入带有查询参数的 URL 时，例如:/experiments?offset=50 ，路线不匹配!

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

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

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

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

Answer 1

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

historyApiFallback 所做的就是让您的服务器为您尝试访问的任何 URL 返回 index.html，并且因为您的路由是根据 配置的>index.html 这样你就可以直接访问任何路由url

在你的webpack中添加

devServer: {
    historyApiFallback: true;
}