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

在React Router 頁面之間傳遞資料

概述

React Router 是一個強大的函式庫，用於在React 應用程式中實現導航。它允許您無縫定義路線並處理頁面轉換。一種常見的用例是在頁面之間傳遞資料以進行顯示或進一步處理。

解決方案：

選項 1：路由狀態

使用 React Router v6，您可以使用狀態連結或導航元件的屬性以在導航時傳遞資料。此資料可透過目標頁面上的位置物件存取。

選項 2：URL 路徑

另一個選項是使用 : 表示法將資料合併到 URL 路徑中。可以從目標頁面上的 match 屬性中檢索資料。

選項 3：URL 查詢字串

與使用 URL 路徑類似，您可以使用以下方法將資料附加到 URL 查詢字串： ？象徵。可以透過 useSearchParams 掛鉤或目標頁面上位置物件的搜尋屬性來存取此資料。

範例：

考慮一個場景，您想要從使用者清單導覽到使用者詳情頁。

// User List Page
import React, { Component } from "react";

export default class User extends Component {
  render() {
    return (
      {this.props.users.map(user => (
        <Link key={user.id} to={`/user/${user.id}`}>
          {user.name}
        </Link>
      ))}
    );
  }
}

// User Details Page
import React from "react";
import { useParams } from "react-router-dom";

export default function UserDetails() {
  const { id } = useParams();
  return (
    {id}
  );
}

在這個例子中，當使用者點擊使用者名稱時，他們會導航到 UserDetails 頁面，該頁面透過 URL 路徑接收使用者的 ID。

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