已解决：在 react router history%2Cpush 中传递数据

与在 react router history,push 中传递数据相关的主要问题是数据不会在页面刷新时持久化。 当用户刷新页面时，存储在 history.push 中的数据将丢失，并且无法在后续页面加载中使用。 这可能会导致意外行为，并可能在尝试访问或存储来自先前页面加载的数据时出现问题。

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

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

  const handleClick = (data) => {
    history.push({ pathname: "/mypage", state: data });
  };

  return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};

1. 此行从 react-router-dom 库中导入 useHistory 钩子，它提供对跟踪应用程序当前位置的历史对象的访问。

2. 该行声明了一个名为 MyComponent 的功能组件，并将其分配给一个常量变量。

3. 该行使用第 1 行中导入的 useHistory 挂钩来访问历史对象并将其分配给名为 history 的常量变量。

4. 该行声明了一个名为 handleClick 的函数，该函数接受一个名为 data 的参数，并使用 history.push() 将包含路径名和状态属性的对象推送到历史堆栈。

5. 此行返回一个带有 onClick 事件处理程序的按钮元素，该事件处理程序在用户单击时使用包含 someData 作为其参数的对象调用 handleClick()。

历史推送

React Router 中的历史推送是一种用于以编程方式更改浏览器中的 URL 而不会导致页面刷新的方法。 它允许开发人员创建仍然能够处理导航和深度链接的单页应用程序。 历史推送通过使用浏览器的历史 API 来工作，它允许开发人员在不重新加载页面的情况下操作当前 URL。 这使得用户可以在应用程序的不同页面之间导航，而不必每次都重新加载。 此外，它还可用于深度链接，允许用户直接链接到应用程序的特定部分。

我如何在反应路由器中使用历史记录

React Router 提供了一种在 React 应用程序中使用历史记录的方法。 历史允许您跟踪当前页面，以及任何以前访问过的页面。 这对于创建导航和跟踪用户操作很有用。

要在 React Router 中使用历史记录，您需要使用 history 包中的 createHistory() 方法创建一个历史记录对象。 这将使您能够访问 push()、replace() 和 go() 等方法。 这些方法允许您操纵浏览器的 URL 并在您的应用程序中的不同路由之间导航。 您还可以使用 listen() 方法来侦听 URL 中的更改并相应地更新您的应用程序。

一旦你创建了一个历史对象，你可以在创建它的时候将它传递给你的路由器组件。 这将允许 React Router 跟踪用户所做的所有更改并相应地更新。

将 history 与 React Router 结合使用可以让开发人员更轻松地创建功能强大的导航组件，这些组件易于用户理解和交互。

相关文章：

发表评论