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

Question

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

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

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

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

Answer 1

解析查询字符串的能力已从 V4 中删除，因为多年来一直要求支持不同的实现。有了这个，团队决定最好由用户来决定该实现的样子。我们建议导入查询字符串库。 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

接受的答案很好，但如果您不想安装额外的包，您可以使用这个：

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

将returnvalue

Answer 3

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

另外，这个功能还可以改进

Answer 4

我刚刚做了这个，所以如果你更新以从较低版本响应路由器 v4 或更高版本，则不需要更改整个代码结构（你使用来自 redux 路由器商店的查询）。

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

Answer 5

给出的答案是可靠的。

如果您想使用 qs module instead of query-string（它们的受欢迎程度大致相同），语法如下：

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

ignoreQueryPrefix选项是忽略开头的问号。

Answer 6

不需要任何包:

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

然后就可以通过params.id

找到相关的参数了

Answer 7

嗯？

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 8

另一种有用的方法可能是像这样使用开箱即用的 URLSearchParams；

  let { search } = useLocation();

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

干净、可读且不需要模块。更多信息如下；

Answer 9

很容易

只需使用钩子useParams()

示例：

路由器:

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

在你的组件中t:

export default function UserComponent() {

  const { id } = useParams();

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

Answer 10

这是一种无需导入任何额外库的方法

const queryString = (string) => {
  return string.slice(1).split('&')
    .map((queryParam) => {
      let data = queryParam.split('=')
      return { key: data[0], value: data[1] }
    })
    .reduce((query, data) => {
      query[data.key] = data.value
      return query
    }, {});
}

const paramData = (history && history.location && history.location.search)
                ? parseQueryString(history.location.search)
                : null;

Answer 11

根据他们的文档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 12

React Router v6

来源：Getting Query Strings (Search Params) in React Router

我知道这是 v4 的问题，但是随着 v6 的发布，下面是我们如何在新版本的 React Router 中搜索参数。

使用新的 useSearchParams 挂钩和 .get() 方法：

const Users = () => {
  const [searchParams] = useSearchParams();
  console.log(searchParams.get('sort')); // 'name'

  return <div>Users</div>;
};

通过这种方法，您可以读取一个或几个参数。

阅读更多内容并进行现场演示：Getting Query Strings (Search Params) in React Router

Answer 13

如果你的路由定义是这样的：

<Route exact path="/edit/:id" ...../>

import { useParams } from "react-router";

const { id } = useParams();

console.log(id)

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

How to get query parameters in react-router v4

react-router

react-router-v4

react-router-dom

很容易

示例：