react-router - 如何在react-router v4中获取查询参数

Question

我在我的项目中使用react-router-dom 4.0.0-beta.6。我有如下代码:

<Route exact path="/home" component={HomePage}/>

我想在 HomePage 组件中获取查询参数。我找到了 location.search 参数，它看起来像这样:?key=value，所以它是未解析的。

使用react-router v4获取查询参数的正确方法是什么？

Answer 1

V4 中取消了解析查询字符串的功能，因为多年来一直要求支持不同的实现。因此，团队决定最好由用户来决定该实现的样子。我们建议导入查询字符串库。 Here's one that I use

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

如果您想要原生的东西并且它可以满足您的需求，您也可以使用new URLSearchParams

const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar

您可以阅读有关该决定的更多信息 here