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

5 回答

• 109

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

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

  回复于 2024-05-04T15:23:28+08:00
• 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

  回复于 2024-05-04T15:23:28+08:00
• 2

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

  回复于 2024-05-04T15:23:28+08:00
• 0

  给出的答案是可靠的 .

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

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

  ignoreQueryPrefix选项是忽略前导问号 .

  回复于 2024-05-04T15:23:28+08:00
• 2

  我正在研究反应路由器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;
  }
  

  此外，可以改进此功能

  回复于 2024-05-04T15:23:28+08:00