首页 文章

React-router不匹配查询字符串

提问于
浏览 次
4

我的路线定义如下：

<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时，如何使路径匹配？

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

Edit: 我把问题缩小到了全能路线 path="*" . 当我删除此路线时，一切正常（例如，当我访问 /experiments?offset=50 时） . 但是当catch-all Route存在时，没有路由匹配，即使它位于优先列表的底部 .

reactjs react-router react-router-redux

2 回答

  • 0

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

    historyApiFallback 的作用是使您的服务器返回 index.html 以查找您尝试访问的任何URL，因为您的路由是根据 index.html 配置的，因此您可以直接访问任何路由URL

    在你的webpack添加

    devServer: {
    historyApiFallback: true;
}
    回复于
  • 0

    好的，事实证明这是一个完全不相关的问题 . 我正在使用redux-auth导致重定向到错误的URL路径名 . 这是在react-router进行解析和路由匹配之后发生的 . 一旦我解决了这个问题，路线匹配就完美了 . 我能够使用上面问题中的Route配置从像 /experiments?offset=50 这样的URL解析查询字符串 .

    回复于

相关问题