反应路由器匹配查询字符串

Question

我在 npm start

上试过这个例子

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

即使我将示例代码更改为以下 <Route path="user/:userID(?:showAge)" component={User} /> 我尝试了一些基于文档可能有效的方法，但 none 其中有效。

我是不是漏掉了什么？

Answer 1

您在 path="user/:userID(?:showAge)"

中缺少根 (/)

此代码必须有效：

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

检查参数是否在路由中：

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

My whole file

Answer 2

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

我已经为它创建了一个 PR，删除了 Link 组件的 activeClassName。

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

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

this picture

react-router match query string