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

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

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

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

解析查询字符串的功能已从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

您可以在此处阅读有关该决定的更多信息

给定的答案是肯定的。

如果要使用qs模块而不是query-string（它们的流行程度大致相等），则语法如下：

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

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

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

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

另一种有用的方法是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/zh-CN/docs/Web/API/URLSearchParams

我正在研究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;
}

另外，可以改善此功能

嗯

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);

我只是这样做了，因此，如果您从较低版本更新为对路由器v4或更高版本做出反应，则无需更改整个代码结构（在其中使用来自redux路由器存储的查询）。

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

很容易

只需使用钩子 useParams()

例：

路由器：

<Route path="/user/:id" component={UserComponent} />

在您的组件中：

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

无需任何包装：

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

然后您可以使用 params.id