我在客户端为我的应用程序使用 react 和 react-router 。我似乎无法弄清楚如何从 url 获取以下查询参数，例如：
http://xmen.database/search#/?status=APPROVED&page=1&limit=20
我的路线看起来像这样（我知道路径完全错误）：
var routes = (
<Route>
<DefaultRoute handler={SearchDisplay}/>
<Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
<Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);
我的路线工作正常，但我不确定如何格式化路径以获取我想要的参数。感谢您对此的任何帮助！
注意：从评论中复制/粘贴。一定要喜欢原帖！
用 es6 编写并使用 react 0.14.6 / react-router 2.0.0-rc5。我使用此命令在我的组件中查找查询参数：
this.props.location.query
它在 url 中创建所有可用查询参数的哈希。
对于 React-Router v4，请参阅此答案。基本上，用于this.props.location.search获取查询字符串并使用query-string包或URLSearchParams 进行解析：
const params = new URLSearchParams(paramsString);
const tags = params.get('tags');
以上答案在react-router v4. 这是我为解决问题所做的工作-
首先安装解析所需的查询字符串。
npm install -save query-string
现在在路由组件中，您可以像这样访问未解析的查询字符串
this.props.location.search
您可以通过登录控制台进行交叉检查。
最后解析访问查询参数
const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own
所以如果查询就像 ?hello=world
console.log(parsed.hello) 会登录 world
旧（v4 之前）：
用 es6 编写并使用 react 0.14.6 / react-router 2.0.0-rc5。我使用此命令在我的组件中查找查询参数：
this.props.location.query
它在 url 中创建所有可用查询参数的哈希。
更新（react-router v4+）：
React Router 4 中的 this.props.location.query 已被删除（目前使用 v4.1.1）更多关于这里问题的信息：https : //github.com/ReactTraining/react-router/issues/4410
看起来他们希望你使用自己的方法来解析查询参数，目前使用这个库来填补空白：https : //github.com/sindresorhus/query-string
更新 2017.12.25
"react-router-dom": "^4.2.2"
网址喜欢
BrowserHistory： http://localhost:3000/demo-7/detail/2?sort=name
HashHistory： http://localhost:3000/demo-7/#/detail/2?sort=name
具有查询字符串依赖性：
this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;
console.log(this.id, this.searchObj, this.from);
结果：
2 {sort: "name"} home
"react-router": "^2.4.1"
网址喜欢 http://localhost:8080/react-router01/1?name=novaline&age=26
const queryParams = this.props.location.query;
queryParams 是一个包含查询参数的对象： {name: novaline, age: 26}
"react-router-dom": "^5.0.0",
您不需要添加任何其他module，只需在具有如下 url 地址的组件中即可：
http://localhost:3000/#/?authority'
您可以尝试以下简单代码：
const search =this.props.location.search;
const params = new URLSearchParams(search);
const authority = params.get('authority'); //