阵营路由器不匹配的查询字符串

我的路线定义如下：阵营路由器不匹配的查询字符串

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

当我访问3210，一切按预期工作和实验部分呈现。但是，当我手动输入带查询参数的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时）。但是当catch-all Route存在时，即使它位于优先级列表的底部，也不会匹配任何路由。

来源

2016-12-22 saiprashanth

请返回并编辑您的帖子，而不是在评论中添加新信息。参考：[询问]，下次请出示[MCVE]。在询问之前，您甚至也懒得完成2分钟的现场参观。 –

道歉。我编辑了我的帖子以添加新的信息。 – saiprashanth

非常好。我刚刚投票赞成你这样做。有一天，也许你会编辑新的用户问题，并告诉他们相同或类似的东西。 –

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

什么historyApiFallback做，是让让你的服务器无论URL您尝试访问返回index.html和因为你的路线，然后相对于index.html配置，以便您可以访问任何路径URL直接

的你webpack add

devServer: { 
    historyApiFallback: true; 
}

来源

2016-12-22 04:27:43

我正在使用[create-react-app]（https://github.com/facebookincubator/create-react-app），我相信它已经使用了'historyApiFallback'。 – saiprashanth

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

来源

2016-12-23 01:44:29 saiprashanth

阵营路由器不匹配的查询字符串

回答

相关问题