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

Question

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

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

我想在HomePage组件中获取查询参数。我找到了location.search参数，如下所示：？key=value，因此未解析。

什么是正确的方法来获得查询参数与反应路由器v4？

Answer 1

给出的答案是肯定的。

如果您想使用qs模块而不是query-string（它们的受欢迎程度大致相同），以下是语法：

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

忽略前导问号的选项是忽略前导问号。

Answer 2

另一个有用的方法是像这样使用现成的URLSearchParams；

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

干净，易读，不需要模块。更多信息在下面；

• https://reacttraining.com/react-router/web/example/query-parameters
• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Answer 3

解析查询字符串的功能已从V4中删除，因为多年来一直有支持不同实现的请求。因此，团队决定最好由用户决定该实现是什么样子。我们建议导入查询字符串库。这是我用的

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

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

如果您想要一些本地的东西，并且它能满足您的需要，您也可以使用新的URLSearchParams

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

你可以在这里阅读更多关于这个决定的信息