已解決：傳遞數據導航反應路由器 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 並將數據作為參數傳遞。

React 路由器 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：'數據'}
}）;