如何使用React Router在頁面之間有效傳遞資料？

如何使用React Router 將資料從一個頁面傳遞到另一個頁面

使用React Router 時，您可能會遇到需要的情況將資料從一個頁面傳遞到另一個頁面，例如在不同的螢幕上顯示使用者詳細資訊。以下是傳遞資料的幾個選項：

選項1：傳遞Route State

• 使用React Router DOM v6 中的Link 元件，或使用React Router DOM v6 中的Navigate 元件v5，並設定state 屬性。
• 從接收方的位置物件解壓縮狀態
• 優點：狀態在 URL 中不可見，並保持 UI 乾淨。

選項2：在URL 路徑中傳遞某些內容

• 使用連結元件或程式將資料附加到URL 路徑
• 從接收頁面的props.match 物件取得參數。
• 優點：資料儲存在 URL 中，可以輕鬆共享。

選項3：在URL 查詢字串中傳遞一些內容

• 使用Link 元件或程式導覽上的search 屬性將資料作為查詢參數傳遞。
• 使用 useSearchParams 鉤子 (v6) 或 URLSearchParams 物件 (v5) 解析接收頁面上的查詢參數。
• 優點：可以輕鬆傳遞少量資料。

React 的注意事項類別元件

• React Router DOM 版本 6 已刪除了路由屬性和 withRouter HOC。
• 要存取類別元件中的路由屬性，請使用包含下列內容的自訂 withRouter HOC：必要的鉤子。

以上是如何使用React Router在頁面之間有效傳遞資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！