Query string 如何从 query 字符串中获取参数值？

在React中，我们可以使用不同的方法来从URL字符串中获取参数值，这通常涉及到处理路由。一个流行的库是React Router。以下是使用React Router v5和v6来从URL中获取参数值的几种方法。

使用 React Router v5

在React Router v5中，你可以通过match对象来访问URL参数。这些参数是通过定义在路由中的path属性捕获的。例子如下：

jsx
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  // 使用 useParams 钩子来获取参数
  let { param1 } = useParams();

  // 现在你可以使用 param1 作为变量了
  return <div>参数值: {param1}</div>;
};

export default MyComponent;

在这个例子中，如果你的应用路由定义如下：

jsx
<Route path="/somepath/:param1" component={MyComponent} />

当用户访问/somepath/value1时，param1将会是value1。

使用 React Router v6

在React Router v6中，获取参数的方式类似，但是更倾向于使用钩子而不是组件的props。这是一个例子：

jsx
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  // 使用 useParams 钩子来获取参数
  const { param1 } = useParams();

  // 现在你可以使用 param1 作为变量了
  return <div>参数值: {param1}</div>;
};

export default MyComponent;

路由定义：

jsx
import { Route, Routes } from 'react-router-dom';

// ...

<Routes>
  <Route path="/somepath/:param1" element={<MyComponent />} />
</Routes>

在这种情况下，useParams 钩子同样被用来获取动态路径参数。

查询参数

如果你需要获取的是查询参数（query parameters），也就是URL中?后面的那部分，则可以使用useLocation钩子来获取整个location对象，其中包括查询字符串：

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

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

const MyComponent = () => {
  const query = useQuery();
  const paramValue = query.get('param1'); // 假设URL是 /somepath?param1=value1

  return <div>查询参数值: {paramValue}</div>;
};

export default MyComponent;

这里，useQuery是一个自定义钩子，它封装了创建URLSearchParams实例的逻辑，让你可以通过get方法来获取特定的查询参数值。在这个例子中，如果URL是/somepath?param1=value1，那么paramValue变量将会是value1。

总的来说，在React中获取URL参数主要通过使用useParams来获取动态路由参数，以及通过useLocation和URLSearchParams来获取查询参数。这些是React Router库提供的工具，但它们实际上都是基于原生的Web API（比如window.location）进行封装的。在React中，从URL字符串中获取参数通常涉及到使用React Router库，因为它为路由相关的任务提供了方便的工具和组件。以下是在不同版本的React Router中获取URL参数的方法。

如果您使用的是 React Router v5：

您可以通过useParams钩子或withRouter高阶组件来获取参数值。这里有两个例子：

1. 使用useParams钩子 (适用于函数组件):

   javascript
   import React from 'react';
   import { useParams } from 'react-router-dom';
   
   const MyComponent = () => {
     let { myParam } = useParams();
     console.log(myParam); // 打印出URL参数myParam的值
   
     // 做其他操作...
     
     return <div>URL中的参数值: {myParam}</div>;
   };
   
   export default MyComponent;

   在这个例子中，如果您的路由定义是<Route path="/somepath/:myParam" component={MyComponent} />，那么当您访问/somepath/value时，myParam将会是value。

2. 使用withRouter高阶组件 (适用于类组件):

   javascript
   import React, { Component } from 'react';
   import { withRouter } from 'react-router-dom';
   
   class MyComponent extends Component {
     componentDidMount() {
       let { myParam } = this.props.match.params;
       console.log(myParam); // 打印出URL参数myParam的值
     }
   
     render() {
       let { myParam } = this.props.match.params;
       return <div>URL中的参数值: {myParam}</div>;
     }
   }
   
   export default withRouter(MyComponent);

   withRouter会向您的组件提供match、location和history对象，您可以通过这些对象来访问路由的相关信息。

如果您使用的是 React Router v6：

在React Router v6中，useParams仍然存在，但withRouter已经被移除。以下是使用useParams钩子的方法：

javascript
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  let { myParam } = useParams();
  console.log(myParam); // 打印出URL参数myParam的值

  // 做其他操作...

  return <div>URL中的参数值: {myParam}</div>;
};

export default MyComponent;

在v6中，路由API做了许多改动，所以您可能也需要使用Routes和Route来定义路由，而不是v5的Switch和Route。

从URL查询字符串中获取参数：

除了路由参数之外，有时您可能还需要从URL的查询字符串（?key=value部分）中获取参数值。您可以使用useLocation钩子结合URLSearchParams API来实现这一点：

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

const MyComponent = () => {
  let location = useLocation();
  let queryParams = new URLSearchParams(location.search);
  let myQueryParam = queryParams.get('key'); // 假设URL是“/myroute?key=value”

  console.log(myQueryParam); // 打印出查询参数key的值

  // 做其他操作...

  return <div>URL查询字符串中的参数值: {myQueryParam}</div>;
};

export default MyComponent;

在这个例子中，如果URL是/myroute?key=value，那么myQueryParam将会是value。

这些就是在React中获取URL参数的几种常用方法。如果您需要更多帮助，请告诉我。

当使用 React hooks 时，无法访问this.props.location. 要捕获 url 参数，请使用windowobject.

shell
const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');

React Router v6，使用钩子

在react-router-dom v6中，有一个名为useSearchParams的新钩子。所以与

shell
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")

你会得到"blablabla"。请注意，searchParams 是 URLSearchParams 的一个实例，它还实现了一个迭代器，例如用于使用 Object.fromEntries 等。

React Router v4/v5，无钩子，通用

React Router v4 不再为您解析查询，但您只能通过this.props.location.search（或 useLocation，见下文）访问它。原因请参见nbeuchat 的回答。

例如，您可以导入qs库qs

shell
qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

另一个库是query-string。有关解析搜索字符串的更多想法，请参阅此答案。如果您不需要IE 兼容性，也可以使用

shell
new URLSearchParams(this.props.location.search).get("__firebase_request_key")

对于功能组件，您可以this.props.location用钩子useLocation替换。请注意，您可以使用window.location.search，但这不允许在更改时触发 React 渲染。如果您的（非功能性）组件不是 a 的直接子组件，Switch您需要使用withRouter来访问路由器提供的任何道具。

反应路由器 v3

React Router 已经为您解析了位置并将其作为 props传递给您的RouteComponent 。您可以通过以下方式访问查询（网址中？之后）部分

shell
this.props.location.query.__firebase_request_key

如果您正在查找路由器内用冒号 (:) 分隔的路径参数值，可以通过以下方式访问这些值

shell
this.props.match.params.redirectParam

这适用于最新的 React Router v3 版本（不确定是哪个）。据报道，较旧的路由器版本使用this.props.params.redirectParam.

一般的

nizam.sp 的建议

shell
console.log(this.props)

无论如何都会有帮助。