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，但它似乎并不适合我。

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

Answer 1

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

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

在你的webpack中添加

devServer: {
    historyApiFallback: true;
}

Answer 2

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

React-router不匹配查询字符串

2 个答案: