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

Question

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

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

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

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

Answer 1

解析查询字符串的能力是从V4中取出的,因为多年来一直有人要求支持不同的实现.有了这个,团队决定最好让用户决定实现的样子.我们建议导入查询字符串lib.这是我使用的一个

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

您可以在此处详细了解该决定

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

根据他们的文档https://reactrouter.com/web/example/query-parameters你需要：

import { useLocation } from 'react-router-dom';

// A custom hook that builds on useLocation to parse
// the query string for you.
function useQuery() {
  return new URLSearchParams(useLocation().search);
}

function App() {
    const query = useQuery();
    console.log(query.get('queryYouAreLookingFor'));
}

Answer 4

给出的答案是可靠的.

如果你想使用qs模块而不是查询字符串(它们的流行度大致相同),这里是语法:

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

该ignoreQueryPrefix选项是忽略领先的问号.

Answer 5

可接受的答案很好用，但是如果您不想安装其他软件包，则可以使用以下方法：

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 6

我正在研究 react router v4 的参数，但他们没有将它用于 v4，不像 react router 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;
}

此外，此功能可以改进