【React 學習筆記 EP.16】動態路由

什麼是動態路由？

React 動態路由就是讓網頁根據網址中的「變動部分」，自動顯示對應內容的機制。

動態路由概念

1. 路由參數：網址中用 : 開頭的變動部分，例如 :id，它會被替換成實際的值，像是 1、42、hello 等。
2. useParams：Router 提供的 Hook，讓你在元件裡面「取出」網址中那段變動的值，拿來做後續處理。
3. 路徑匹配：Router 會自動比對使用者輸入的網址跟你定義的路由規則，找到吻合的那一條並渲染對應的元件。

動態路由語法

1. path="/user/:id"：定義路由路徑，:id 是動態參數，代表這段網址會變動。
2. element={<UserPage />}：當網址匹配成功時，要顯示的 React 元件。
3. useParams()：呼叫這個 Hook，回傳一個物件，裡面包含所有路由參數。
4. { id }：用解構語法取出名為 id 的參數值（對應 :id）。

{/* 
<Route path="/user/:id" element={<UserPage />} />
const { id } = useParams();
*/}

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

// 動態頁面元件：根據網址參數顯示不同內容
function UserPage() {
  const { id } = useParams(); // 從網址中取出 :id 的值
  return <h1>你正在查看第 {id} 位使用者</h1>; // 顯示動態內容
}

export default function App() {
  return (
    <BrowserRouter> {/* 啟用路由功能 */}
      <Routes> {/* 包住所有路由規則 */}
        <Route path="/user/:id" element={<UserPage />} /> {/* 動態路由定義 */}
      </Routes>
    </BrowserRouter>
  );
}