React 是一个流行的前端框架，它提供了许多工具来帮助开发人员构建 SPA（单页应用程序）。其中之一是 React Router。在 React Router 中，路由是指将 URL 映射到组件的过程。路由器使用散列片段（hash fragment）作为 URL 工具箱。
在某些情况下，您可能需要从 URL 中获取查询参数。本文将介绍如何从 React 路由器散列片段中获取查询参数，并提供示例代码和说明。
散列片段和查询参数
URL 由多个部分组成，包括协议、域名、路径和查询参数。查询参数是一个问号后面跟着键值对的字符串，例如 ?name=john&age=30。可以使用查询参数将数据从一个页面传递到另一个页面。
散列片段是 URL 的一部分，它通常出现在 URL 的末尾。它由井号（#）和字符组成。在 Web 应用程序中，散列片段用于在客户端和服务器之间传递状态信息。
获取查询参数
在 React 路由器中，路由器会将查询参数存储在位置对象（location object）中。可以使用以下代码获取位置对象：
------ - ----------- - ---- ------------------- -------- ------------- - ----- -------- - -------------- -- --- -
位置对象包含有关 URL 的信息，包括路径名（pathname）、搜索（search）和散列片段（hash）。要从查询参数中获取值，请访问 location.search。这将返回一个字符串，该字符串以问号开头，后面是查询参数。
以下代码演示了如何从查询参数中获取单个值：
------ - ----------- - ---- ------------------- -------- ------------- - ----- -------- - -------------- ----- ------ - --- --------------------------------- ----- ---- - ------------------- -- --- -
在上面的代码中，我们使用 URLSearchParams 构造函数创建了一个新的 URLSearchParams 对象，并将查询参数传递给它。然后，我们可以使用 get 方法从 URLSearchParams 对象中获取单个值。
如果您需要获取多个值，请使用 getAll 方法。例如，以下代码获取名为“color”的所有值：
------ - ----------- - ---- ------------------- -------- ------------- - ----- -------- - -------------- ----- ------ - --- --------------------------------- ----- ------ - ----------------------- -- --- -
示例代码
以下是一个完整的示例代码：
------ - ----------- - ---- -------------------
-------- ------------- -
----- -------- - --------------
----- ------ - --- ---------------------------------
----- ---- - -------------------
----- --- - ------------------
----- ------ - -----------------------
------ -
-----
-------- ----------
------- ---------
---------- --------------- -------
------
--
-在上面的代码中，我们获取了名为“name”和“age”的单个值以及名为“color”的所有值，并将它们呈现在页面上。
结论
在 React 路由器中，可以使用 useLocation 钩子和 URLSearchParams 类来从散列片段中获取查询参数。这使开发人员能够轻松地访问 URL 中的数据，并在应用程序中使用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13088