已解决：传递数据导航反应路由器 dom

使用 React Router DOM 导航时与传递数据相关的主要问题是数据必须在 URL 查询字符串中传递。 这意味着任何敏感信息都必须在传递之前进行编码，因为它将在 URL 中可见。 此外，如果数据太大，可能会超过 URL 的最大长度并导致错误。 最后，如果您使用 React Router DOM 在应用程序内的页面之间导航，您还必须手动管理状态并跟踪更改以确保所有组件都可以访问相同的数据。

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// 第 1 行：此行从 react-router-dom 库中导入 useHistory 挂钩。
// 第 3 行：这行声明了一个名为 MyComponent 的常量，它是一个返回 JSX 的函数。
// 第 4 行：这行声明了一个名为 history 的常量，它被分配给从 react-router-dom 导入的 useHistory 钩子。
// 第 6 行：该行声明了一个名为 handleClick 的函数，该函数接受一个参数 data。
// 第 7 行：该行使用历史对象将路径名为“/myroute”的新路由推入堆栈，并将状态数据作为对象传递。
// 第 9 – 11 行：这些行返回 JSX，其中包含一个带有 onClick 事件处理程序的按钮元素，该事件处理程序调用 handleClick 并将数据作为参数传递。

反应路由器 Dom

React Router DOM 是 React 的路由库，允许开发人员在其 React 应用程序中创建和管理路由。 它提供了使用 React 构建复杂的多页面 Web 应用程序所需的核心组件，包括 Link、Route、Switch 和 BrowserRouter 等组件。 它还提供动态路线匹配和位置跟踪等功能。 借助 React Router DOM，开发人员可以轻松创建具有多个视图和路由的单页应用程序，而无需手动管理 URL 或浏览器历史记录。

你如何通过在 react-router-Dom 中导航来传递数据

在 React Router 中，可以使用历史 API 的状态对象通过导航传递数据。 state 对象可以通过 props 渲染的任何组件访问 成分。 要传递数据，您可以在调用导航函数时将其添加到状态对象。 例如：

const { 历史 } = this.props;
历史.推({
路径名：'/一些/路径'，
状态：{ someData：'数据'}
}）;