从 React 路由器散列片段获取查询参数

React 是一个流行的前端框架，它提供了许多工具来帮助开发人员构建 SPA（单页应用程序）。其中之一是 React Router。在 React Router 中，路由是指将 URL 映射到组件的过程。路由器使用散列片段（hash fragment）作为 URL 工具箱。

在某些情况下，您可能需要从 URL 中获取查询参数。本文将介绍如何从 React 路由器散列片段中获取查询参数，并提供示例代码和说明。

散列片段和查询参数

URL 由多个部分组成，包括协议、域名、路径和查询参数。查询参数是一个问号后面跟着键值对的字符串，例如 ?name=john&age=30。可以使用查询参数将数据从一个页面传递到另一个页面。

散列片段是 URL 的一部分，它通常出现在 URL 的末尾。它由井号（#）和字符组成。在 Web 应用程序中，散列片段用于在客户端和服务器之间传递状态信息。

获取查询参数

在 React 路由器中，路由器会将查询参数存储在位置对象（location object）中。可以使用以下代码获取位置对象：

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

function MyComponent() {
  const location = useLocation();
  // ...
}

位置对象包含有关 URL 的信息，包括路径名（pathname）、搜索（search）和散列片段（hash）。要从查询参数中获取值，请访问 location.search。这将返回一个字符串，该字符串以问号开头，后面是查询参数。

以下代码演示了如何从查询参数中获取单个值：

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

function MyComponent() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const name = params.get("name");
  // ...
}

在上面的代码中，我们使用 URLSearchParams 构造函数创建了一个新的 URLSearchParams 对象，并将查询参数传递给它。然后，我们可以使用 get 方法从 URLSearchParams 对象中获取单个值。

如果您需要获取多个值，请使用 getAll 方法。例如，以下代码获取名为“color”的所有值：

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

function MyComponent() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const colors = params.getAll("color");
  // ...
}

示例代码

以下是一个完整的示例代码：

-- -------------------- ---- -------
------ - ----------- - ---- -------------------

-------- ------------- -
  ----- -------- - --------------
  ----- ------ - --- ---------------------------------
  ----- ---- - -------------------
  ----- --- - ------------------
  ----- ------ - -----------------------

  ------ -
    -----
      -------- ----------
      ------- ---------
      ---------- --------------- -------
    ------
  --
-

在上面的代码中，我们获取了名为“name”和“age”的单个值以及名为“color”的所有值，并将它们呈现在页面上。

结论

在 React 路由器中，可以使用 useLocation 钩子和 URLSearchParams 类来从散列片段中获取查询参数。这使开发人员能够轻松地访问 URL 中的数据，并在应用程序中使用它。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13088