react-router匹配查询字符串 | router匹配查询字符串

本文介绍了react-router匹配查询字符串的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

https://github.com/reactjs/react-router/example

我在npm start

与路由匹配的查询字符串不适用于该示例.当我单击第二个时，它激活了错误的一个

query string match to route is not working on the example.When I click the second one, It's activating wrong one

http://localhost:8080/query-params/user/bob? showAge = 1 并刷新上面与任何路由都不匹配的链接.

http://localhost:8080/query-params/user/bob?showAge=1and refreshing on the link above not matching any routes.

即使我将示例代码更改为以下内容 <Route path="user/:userID(?:showAge)" component={User} />我尝试了一些可能基于文档起作用的方法，但没有一个起作用.

Even if I have change the example code to below <Route path="user/:userID(?:showAge)" component={User} />I tried couple of things that might work based on docs but none of them worked.

我想念什么吗?

推荐答案

原来，react-router github上的示例存在错误.

Turned out there was error on the example on react-router github.

我为此制作了一个PR，它删除了Link组件的activeClassName.

I've made a PR for it which removes activeClassName for Link component.

没有它，它可以正常工作，并且查询字符串位于位置道具中，请参见下文

without it, it works fine, and query string is in location props, see below

this.props.location.query = {
  query1: value1,
  query2: value2
}

这张图片

这篇关于react-router匹配查询字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！