react-router匹配查询字符串

IT技术 reactjs match react-router
2021-04-28 15:28:10

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} /> 我也尝试了一些可能基于文档工作的方法,但没有一个起作用。

我错过了什么吗?

2个回答

结果发现 react-router github 上的示例存在错误。

我为它做了一个 PR,它删除activeClassName了 Link 组件。

没有它,它工作正常,查询字符串在位置props中,见下文

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

这张照片

您缺少根 ( /)path="user/:userID(?:showAge)"

此代码必须有效:

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

检查参数是否在路由中:

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

我的整个文件