react-router匹配查询字符串

Question

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

我在npm start

上尝试了这个例子

查询字符串匹配到路由不适用于该示例。 当我点击第二个时，它会激活错误的

http://localhost:8080/query-params/user/bob?showAge=1 并且在上面的链接上刷新并且不匹配任何路线。

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

我错过了什么吗？

Answer 1

你缺少路径中的根（/）=“user /：userID（？：showAge）”

此代码必须有效：

 <Router history={history}>
    <Route path="/user/:userID/:showAge)" component={User} />
  </Router>

检查参数是否在路线中：

  console.log(JSON.stringify(this.props.routeParams));

我的整个文件：

https://github.com/aarkerio/vet4pet/blob/master/app/assets/frontend/javascripts/entry.js

Answer 2

原来在react-router github上的示例有错误。

我为它制作了PR，删除了activeClassName的链接组件。

没有它，它工作正常，查询字符串在位置道具，见下文

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

this picture