React Router介紹

什麼是 React Router？

React Router 是一個用於 React 應用程式的路由管理庫。它允許你在不同的 URL 路徑下渲染不同的元件，實現類似傳統多頁面網站的導航效果，但實際上仍然是單頁應用程式。React Router 的核心概念是根據瀏覽器的 URL 動態渲染對應的元件，讓使用者感覺像是在切換頁面。

React Router 的最新版本（目前為 React Router v6，2025 年 6 月為止）提供了簡潔的 API，並針對現代 React 應用程式做了許多優化。它支援以下功能：

路由匹配：根據 URL 渲染特定元件。
巢狀路由：支援在父路由中嵌入子路由。
動態路由：支援帶參數的 URL（例如 /user/:id）。
程式化導航：透過程式碼控制導航（例如按鈕點擊後跳轉）。
查詢參數和狀態管理：處理 URL 查詢字符串或導航狀態。

為什麼需要 React Router？

在單頁應用程式中，React 本身並不會因為瀏覽器 URL 的變化而自動切換頁面內容。如果沒有路由管理，當使用者輸入不同 URL 或點擊導航連結時，應用程式無法正確顯示對應的頁面。React Router 解決了這個問題，讓你能夠：

根據 URL 顯示不同的頁面內容。
支援瀏覽器的「前進」和「後退」按鈕。
提供乾淨的 API，讓路由管理變得簡單且直觀。

安裝 React Router

要開始使用 React Router，你需要先安裝它。以下是詳細的步驟：

步驟 1：建立 React 專案（若尚未建立）

如果你還沒有 React 專案，可以使用以下指令建立一個新的專案：

npx create-react-app my-router-app
cd my-router-app

步驟 2：安裝 React Router

在你的專案目錄中，執行以下指令來安裝 React Router：

npm install react-router-dom

react-router-dom 是 React Router 的子模組，專為網頁應用程式設計，提供了瀏覽器特定的功能（例如處理瀏覽器歷史紀錄）。

基本使用教學

以下是一個簡單的 React Router 範例，展示如何設置基本路由，並實現頁面間的導航。

步驟 1：設置路由

在你的 React 專案中，修改 src/App.js，將 React Router 引入並設置路由。

以下是完整的程式碼：

// src/App.js
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

// 首頁元件
function Home() {
  return <h2>這是首頁</h2>;
}

// 關於頁面元件
function About() {
  return <h2>這是關於頁面</h2>;
}

// 聯繫頁面元件
function Contact() {
  return <h2>這是聯繫頁面</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        {/* 導航列 */}
        <nav>
          <ul>
            <li>
              <Link to="/">首頁</Link>
            </li>
            <li>
              <Link to="/about">關於</Link>
            </li>
            <li>
              <Link to="/contact">聯繫我們</Link>
            </li>
          </ul>
        </nav>

        {/* 路由配置 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

程式碼說明

BrowserRouter：
- 這是 React Router 的核心元件，負責監聽瀏覽器的 URL 變化並管理路由。
- 所有路由相關的元件都必須包在 <BrowserRouter> 內。
Routes：
- 用來定義所有的路由規則，取代了舊版的 <Switch>（v6 改進）。
- 每個 <Route> 定義了一個路徑（path）和對應的元件（element）。
Route：
- 定義特定的路徑和渲染的元件。例如，path="/" 表示當 URL 為根路徑時，渲染 <Home /> 元件。
Link：
- 用來創建導航連結，取代傳統的 <a> 標籤。
- 點擊 <Link> 會改變 URL，但不會重新載入頁面，保持單頁應用程式的流暢體驗。

步驟 2：運行專案

在終端機中執行以下指令啟動專案：

npm start

打開瀏覽器，訪問 http://localhost:3000 ，你應該會看到「首頁」內容。點擊導航列中的「關於」或「聯繫我們」，頁面會切換到對應的元件內容。

進階功能

以下是一些 React Router 的進階功能，幫助你更好地管理路由。

1. 動態路由（Dynamic Routing）

動態路由允許你根據 URL 參數動態渲染內容。例如，顯示特定使用者的資料頁面。

範例：動態使用者頁面

假設你想根據 URL 中的使用者 ID 顯示不同的使用者資訊：

// src/App.js
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useParams,
} from "react-router-dom";

function Home() {
  return <h2>這是首頁</h2>;
}

function User() {
  const { id } = useParams(); // 取得 URL 參數
  return <h2>使用者 ID: {id}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首頁</Link>
            </li>
            <li>
              <Link to="/user/123">使用者 123</Link>
            </li>
            <li>
              <Link to="/user/456">使用者 456</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/user/:id" element={<User />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

說明

useParams 是一個 React Router 的 Hook，用來取得 URL 中的動態參數（例如 :id）。
當你訪問 /user/123 時，頁面會顯示「使用者 ID: 123」。

2. 巢狀路由（Nested Routes）

巢狀路由允許你在父路由中嵌入子路由，常見於有側邊欄或分頁的頁面設計。

範例：巢狀路由

假設「關於」頁面有兩個子頁面：公司介紹和團隊介紹。

// src/App.js
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";

function Home() {
  return <h2>這是首頁</h2>;
}

function About() {
  return (
    <div>
      <h2>關於我們</h2>
      <nav>
        <ul>
          <li>
            <Link to="company">公司介紹</Link>
          </li>
          <li>
            <Link to="team">團隊介紹</Link>
          </li>
        </ul>
      </nav>
      {/* Outlet 用來渲染子路由的內容 */}
      <Outlet />
    </div>
  );
}

function Company() {
  return <h3>這是公司介紹</h3>;
}

function Team() {
  return <h3>這是團隊介紹</h3>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首頁</Link>
            </li>
            <li>
              <Link to="/about">關於</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />}>
            <Route path="company" element={<Company />} />
            <Route path="team" element={<Team />} />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

說明

<Outlet> 是用來渲染子路由的元件，放在父元件中，子路由的內容會在這裡顯示。
訪問 /about/company 時，會顯示「關於我們」頁面，並在 <Outlet> 位置顯示「公司介紹」內容。

3. 程式化導航（Programmatic Navigation）

有時候你需要透過程式碼控制導航，例如按鈕點擊後跳轉頁面。

範例：按鈕跳轉

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

function Home() {
  const navigate = useNavigate(); // 用於程式化導航

  const handleClick = () => {
    navigate("/about"); // 點擊按鈕跳轉到關於頁面
  };

  return (
    <div>
      <h2>這是首頁</h2>
      <button onClick={handleClick}>前往關於頁面</button>
    </div>
  );
}

function About() {
  return <h2>這是關於頁面</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

說明

useNavigate 是一個 Hook，提供一個 navigate 函數，讓你可以在程式碼中控制頁面跳轉。
你也可以傳遞參數，例如 navigate('/user/123')。

常見問題與解決方案

404 頁面（找不到頁面） 如果使用者輸入不存在的路徑，你可以設置一個「萬用路由」來顯示 404 頁面。

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

function Home() {
  return <h2>這是首頁</h2>;
}

function About() {
  return <h2>這是關於頁面</h2>;
}

function NotFound() {
  return <h2>404 - 頁面不存在</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} /> {/* 萬用路由 */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

path="*" 會匹配所有未定義的路徑，顯示 404 頁面。

查詢參數（Query Parameters） 你可以使用 useSearchParams Hook 來處理 URL 中的查詢參數（例如 ?name=John）。

import { useSearchParams } from "react-router-dom";

function QueryPage() {
  const [searchParams] = useSearchParams();
  const name = searchParams.get("name");
  return <h2>你好，{name || "訪客"}！</h2>;
}

訪問 /query?name=John 時，頁面會顯示「你好，John！」。

React Router 的優點與限制

優點

簡單易用：API 直觀，適合初學者。
靈活：支援動態路由、巢狀路由、程式化導航等進階功能。
與 React 高度整合：無需額外配置，與 React 元件無縫整合。
瀏覽器歷史紀錄支援：自動處理前進/後退功能。

限制
學習曲線：對於初學者來說，巢狀路由和動態路由可能需要時間理解。
伺服器端渲染（SSR）：需要額外配置才能支援伺服器端渲染。
大型應用程式：需要良好的路由規劃，否則可能導致程式碼複雜。

實務建議

規劃路由結構：在專案開始前，先設計好 URL 結構，避免後期修改麻煩。
使用命名規範：路由路徑使用清晰的名稱，例如 /products 而不是 /p。
善用 Hooks：useNavigate、useParams 和 useSearchParams 可以讓程式碼更簡潔。

懶加載（Lazy Loading）：對於大型應用程式，使用 React 的 lazy 和 Suspense 來延遲載入路由元件，提升效能。

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

const About = lazy(() => import("./About"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>載入中...</div>}>
        <Routes>
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

總結

React Router 是一個強大的工具，讓你的 React 應用程式能夠輕鬆實現路由管理。透過 <BrowserRouter>、<Routes>、<Route> 和 <Link>，你可以快速設置基本的頁面導航；透過 useParams 和 useNavigate 等 Hook，你可以實現動態路由和程式化導航。

無論你是初學者還是有經驗的開發者，React Router 都能滿足你的需求，從簡單的頁面切換到複雜的巢狀路由結構。掌握 React Router 後，你就能建立功能完整、用戶體驗良好的單頁應用程式。

什麼是 React Router？​

為什麼需要 React Router？​

進階功能​

範例：動態使用者頁面​

說明​

範例：巢狀路由​

說明​

範例：按鈕跳轉​

說明​

常見問題與解決方案​

React Router 的優點與限制​

實務建議​

總結​