動態路由

動態路由

在 React Router 中，動態路由 是一種允許我們在 URL 中定義變數的路由模式，這對於根據參數顯示不同數據的場景（如顯示特定用戶信息或產品詳情）非常有用。動態路由中的變數稱為路由參數，可以根據 URL 的不同部分動態渲染不同的內容。

---

1. 動態路由的定義

在 React Router 中，動態路由可以使用 :param 的形式來定義。例如，我們可以設置一個用戶詳情頁，URL 包含一個用戶的 ID：

<Route path="/user/:id" element={<UserDetail />} />

這裡的 :id 是一個動態參數，它會根據訪問的 URL 來捕捉具體的值，並傳遞給對應的組件。

---

2. 提取路由參數：useParams

為了在組件中獲取動態路由的參數，我們可以使用 React Router 提供的 useParams Hook。這個 Hook 返回一個對象，其中的每個屬性對應於路徑中的動態參數。

(1) 使用 useParams 來提取路由參數

import React from 'react';
import { useParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams(); // 提取 URL 中的 id 參數

  return (
    <div>
      <h1>用戶詳情</h1>
      <p>用戶 ID: {id}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<UserDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

(2) 解析範例

當我們訪問 /user/123 時，useParams 會返回 { id: '123' }，並且在頁面上顯示出 用戶 ID: 123。

---

3. 多個動態參數

我們可以在同一個路由中定義多個動態參數。例如，我們可以設置一個顯示訂單詳情的頁面，URL 包含用戶 ID 和訂單 ID：

<Route path="/user/:userId/order/:orderId" element={<OrderDetail />} />

(1) 提取多個動態參數

import React from 'react';
import { useParams } from 'react-router-dom';

function OrderDetail() {
  const { userId, orderId } = useParams(); // 提取多個參數

  return (
    <div>
      <h1>訂單詳情</h1>
      <p>用戶 ID: {userId}</p>
      <p>訂單 ID: {orderId}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:userId/order/:orderId" element={<OrderDetail />} />
      </Routes>
    </Router>
  );
}

(2) 解析範例

當我們訪問 /user/456/order/789 時，useParams 會返回 { userId: '456', orderId: '789' }，頁面上會顯示對應的用戶 ID 和訂單 ID。

---

4. 可選的動態參數

React Router 也支持可選的動態參數，這意味著某些參數可以不出現在 URL 中。例如：

<Route path="/product/:productId/:variantId?" element={<ProductDetail />} />

這裡的 :variantId? 是一個可選參數，? 表示它可以存在或不存在。

(1) 提取可選參數

import React from 'react';
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { productId, variantId } = useParams(); // variantId 可選

  return (
    <div>
      <h1>產品詳情</h1>
      <p>產品 ID: {productId}</p>
      {variantId && <p>變體 ID: {variantId}</p>}
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/product/:productId/:variantId?" element={<ProductDetail />} />
      </Routes>
    </Router>
  );
}

(2) 解析範例

• 訪問 /product/123 時，頁面只會顯示 產品 ID: 123。
• 訪問 /product/123/456 時，頁面會顯示 產品 ID: 123 和 變體 ID: 456。

---

5. 使用 useNavigate 動態導航

除了在路由中提取參數，我們還可以使用 useNavigate Hook 來動態導航到包含動態參數的路徑。例如，在點擊按鈕後跳轉到特定的用戶詳情頁面：

import React from 'react';
import { useNavigate } from 'react-router-dom';

function UserList() {
  const navigate = useNavigate();

  const viewUser = (id) => {
    navigate(`/user/${id}`);
  };

  return (
    <div>
      <h1>用戶列表</h1>
      <button onClick={() => viewUser(1)}>查看用戶 1</button>
      <button onClick={() => viewUser(2)}>查看用戶 2</button>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<UserDetail />} />
        <Route path="/users" element={<UserList />} />
      </Routes>
    </Router>
  );
}

當點擊 查看用戶 1 按鈕時，會跳轉到 /user/1。

---

6. 動態路由的應用場景

動態路由常用於以下場景：

1. 用戶詳情頁：顯示不同用戶的詳細資料（/user/:id）。
2. 產品詳情頁：顯示特定產品的信息（/product/:productId）。
3. 分類或標籤頁：顯示特定分類或標籤下的內容（/category/:categoryId 或 /tag/:tagId）。
4. 博客文章詳情：顯示特定文章的內容（/post/:postId）。

---

總結

React Router 中的動態路由允許我們根據 URL 的參數動態渲染組件，這在需要根據特定數據（如用戶、產品、文章等）進行頁面切換的應用中非常有用。透過 useParams 提取路由參數和 useNavigate 進行動態導航，我們可以實現靈活且高效的路由控制。