Skip to main content

React Router 教學

React Router 是 React 應用程式中實現單頁導頁（SPA）的主流方案。它提供多種導頁方式，常見的有 <Link> 元件與 useNavigate() hook。本教學將介紹這兩者的基本用法、適用情境，並延伸補充幾個常見的進階使用方式。

  • 用於頁面靜態導覽（例如導覽列、列表）
  • 不會刷新頁面，體驗流暢
  • 適合用戶「主動點擊」時

範例：

<Link to="/about">關於我們</Link>

useNavigate 用法與情境​

  • 適用於「程式邏輯」觸發的導航（如 API 結果、事件回應、表單送出）
  • 可主動控制跳轉時機

範例：

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

const navigate = useNavigate();
function handleLogin() {
  // ...登入流程
  navigate("/dashboard");
}

其他常見用法​

<NavLink> 除了具備 <Link> 功能，還能根據目前路徑自動加上「active」樣式。

範例：

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

<NavLink
  to="/profile"
  className={({ isActive }) => (isActive ? "active nav-link" : "nav-link")}
>
  我的檔案
</NavLink>;

2. Navigate 元件自動重導​

用於元件渲染時自動導頁（常見於權限控制、路由守衛）。

範例：

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

function ProtectedRoute({ user }) {
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  return <Dashboard />;
}

3. 跳轉時帶參數與狀態​

  • 可傳遞動態路徑參數
  • 可利用 state 傳資料到新頁面

範例：

// 1. 動態路徑
<Link to={`/post/${post.id}`}>詳情</Link>;

// 2. 帶 state
navigate("/result", { state: { score: 100 } });

// 接收 state
const location = useLocation();
console.log(location.state.score);

4. 返回上一頁​

useNavigate 可傳入負數代表返回歷史紀錄。

範例：

const navigate = useNavigate();
<button onClick={() => navigate(-1)}>返回上一頁</button>;

5. 阻擋未登入用戶導頁​

常搭配 React Router 的路由守衛（Protected Route Pattern）。

範例：

function PrivateRoute({ children }) {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" />;
}

情境比較與選擇建議​

用法適用情境範例
<Link>靜態導覽、超連結主選單、列表
<NavLink>導覽列需自動高亮側邊欄、Tab 導覽
useNavigate程式邏輯導頁、事件觸發表單送出、API 回傳
<Navigate>條件式自動跳轉權限判斷、登入狀態

更多實戰常用方法​

6. 巢狀路由（Nested Routes）​

可在父路由下定義子路由，實現多層頁面結構。

// App.js
<Routes>
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

7. 懶加載路由（Lazy Loading）​

提升效能，僅在需要時載入頁面元件。

import { lazy, Suspense } from "react";
const About = lazy(() => import("./About"));

<Suspense fallback={<div>Loading...</div>}>
  <Route path="/about" element={<About />} />
</Suspense>;

8. 404 Not Found 處理​

捕捉未定義路由，顯示自訂 404 頁面。

<Routes>
  {/* ...其他路由... */}
  <Route path="*" element={<NotFound />} />
</Routes>

9. 路由參數驗證與預設值​

可在元件內驗證參數，或給定預設值。

import { useParams } from "react-router-dom";
function Post() {
  const { id = "default" } = useParams();
  // 驗證 id 是否有效
}

10. URL 查詢參數（Query Params）操作​

取得與設定網址查詢參數。

import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get("page");
setSearchParams({ page: 2 });

11. 路由動畫（Transition）​

可搭配動畫函式庫（如 Framer Motion）實現頁面切換動畫。

import { motion } from "framer-motion";
function Page() {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
      內容
    </motion.div>
  );
}

這些技巧能讓你的 React Router 導頁更靈活、專業，適用於中大型專案與多元情境。