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

Question

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

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

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

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

Answer 1

解析查询字符串的能力是从V4中取出的，因为多年来一直有人要求支持不同的实现。有了这个，团队决定最好让用户决定实现的样子。我们建议导入查询字符串lib。 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决定的更多信息

Answer 2

给出的答案是可靠的。

如果你想使用qs模块而不是query-string（它们的流行度大致相同），这里是语法：

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

ignoreQueryPrefix选项是忽略前导问号。

Answer 3

接受的答案很有效，但如果您不想安装其他软件包，可以使用：

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

鉴于http://www.google.co.in/?key=value

getUrlParameter('key');

将返回value

Answer 4

我正在研究反应路由器v4的params，他们没有将它用于v4，而不像反应路由器v2 / 3。我将留下另一个功能 - 也许有人会发现它有用。你只需要es6或普通的javascript。

function parseQueryParams(query) {
  //You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
  const queryArray = query.split('?')[1].split('&');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split('=');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

此外，可以改进此功能

Answer 5

嗯？

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);

Answer 6

我刚刚做了这个，所以如果您更新以从较低版本更新路由器v4或更高版本，则不需要更改整个代码结构（使用redux路由器存储中的查询）。

https://github.com/saltas888/react-router-query-middleware

Answer 7

无需任何包装：

const params = JSON.parse(JSON.stringify(this.props.match.params));

然后，您可以使用params.id获取相关参数