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

发布时间：2020-12-15 09:34:40 所属栏目：百科来源：网络整理

导读：我的路线定义如下： Router history={browserHistory} Route path="/" component={App} Route path="experiments" IndexRoute component={Experiments} / /Route Route path="*" component={NoMatch}/ /Route /Router 当我访问/实验时,事情按预期工作,并呈现

我的路线定义如下：

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

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

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

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

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

编辑：
我将问题缩小到了全能路径路径=“*”.当我删除此路线时,一切正常(例如,当我访问/实验时？偏移= 50).但是当catch-all Route存在时,没有路由匹配,即使它位于优先列表的底部.

解决方法

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

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

在你的webpack添加

devServer: {
    historyApiFallback: true;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!