已解决：从 url react router dom v6 获取查询

从 URL React Router DOM v6 获取查询的主要问题是它没有提供访问查询参数的内置方式。 相反，开发人员必须自己手动解析 URL 字符串并提取查询参数。 这可能是一个乏味的过程，如果操作不当可能会导致错误。 此外，如果 URL 结构发生变化，则可能需要相应地更新代码。

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

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. “从‘react-router-dom’导入{useLocation}；” – 此行从 react-router-dom 库中导入 useLocation 挂钩。
2. “const MyComponent = () => {”——这一行声明了一个名为 MyComponent 的函数，它将返回一个 React 组件。
3. “const location = useLocation();” – 此行使用导入的 useLocation 挂钩获取有关应用程序当前位置的信息（例如，URL）。
4. “const queryParams = new URLSearchParams(location.search);” – 该行创建一个包含当前 URL 中所有查询参数的对象（例如，?myParam=foo）。
5. 其余代码只是返回一个带有 h1 和 p 标签的 React 组件，该标签在 URL 查询字符串中显示 myParam 的值（如果存在）。

反应路由器 Dom

React Router DOM 是 React 的路由库，允许开发人员在其 React 应用程序中创建和管理路由。 它提供了一个用于导航应用程序的 API，允许开发人员以声明方式定义路由、根据当前 URL 呈现组件以及应用程序不同部分之间的链接。 它还支持动态路线匹配、位置跟踪和导航守卫等功能。

如何在 React v6 路由器中获取查询字符串

v6

在 React Router v6 中，您可以使用 useLocation 挂钩访问查询字符串参数。 此挂钩返回一个位置对象，该对象包含有关当前 URL 的信息，包括路径名、搜索、哈希和状态属性。 搜索属性包含查询字符串参数作为字符串。 然后您可以解析此字符串以获取包含所有查询字符串参数的对象。
例如：
const {搜索} = useLocation();
const params = new URLSearchParams(搜索);
const param1 = params.get('param1');

相关文章：

发表评论