已解決：在 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 結合使用可以讓開發人員更輕鬆地創建功能強大的導航組件，這些組件易於用戶理解和交互。

相關文章：

發表評論