測驗：React Router 基本路由配置

共 5 題，點選答案後會立即顯示結果

1. 在 React Router 中，`<Link>` 和 HTML 的 `<a>` 標籤有什麼主要差異？

A. Link 會重新載入整個頁面，a 標籤不會
B. Link 不會重新載入頁面且保留應用狀態，a 標籤會重新載入
C. Link 和 a 標籤功能完全相同，只是語法不同
D. Link 只能用於外部連結，a 標籤只能用於內部連結

2. `<Routes>` 元件的主要作用是什麼？

A. 包住整個應用程式，啟用路由功能
B. 建立可點擊的導航連結
C. 作為路由容器，比對網址並只顯示第一個符合的 Route
D. 定義單一網址對應的畫面元件

3. 如何設定一個 404 頁面來處理所有未匹配的網址？

<Routes>
  <Route path=”/” element={<Home />} />
  <Route path=”/about” element={<About />} />
  {/* 404 路由應該放在這裡 */}
</Routes>

A. <Route path="404" element={<NotFound />} />
B. <Route path="notfound" element={<NotFound />} />
C. <Route default element={<NotFound />} />
D. <Route path="*" element={<NotFound />} />

4. `<NavLink>` 和 `<Link>` 的主要差異是什麼？

A. NavLink 速度比 Link 快
B. NavLink 會自動幫目前頁面的連結加上 active 樣式
C. NavLink 只能用在導航列，Link 可以用在任何地方
D. NavLink 支援傳遞 state，Link 不支援

5. 在巢狀路由結構中，`index` 路由的作用是什麼？

<Routes>
  <Route path=”/” element={<Layout />}>
    <Route index element={<Home />} />
    <Route path=”about” element={<About />} />
  </Route>
</Routes>

A. 定義該路由在陣列中的索引位置
B. 設定路由的優先順序
C. 當路徑為父層路徑時顯示的預設子頁面
D. 標記該路由為首頁，會優先比對

一句話說明

用 Routes 定義「網址對應哪個畫面」，用 Link 讓使用者點擊換頁。

前置知識

第 1 篇：React Router 快速入門（已安裝 react-router-dom）

最小範例

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首頁</Link>
        <Link to="/about">關於</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() { return <h1>首頁</h1>; }
function About() { return <h1>關於頁面</h1>; }
Code language: JavaScript (javascript)

這段代碼做了什麼：

BrowserRouter 包住整個應用，啟用路由功能
Link 建立可點擊的導航連結
Routes 和 Route 定義網址與畫面的對應

核心元件翻譯

你會看到	意思
`<Routes>`	路由容器，包住所有路由規則
`<Route path="/" element={...} />`	「網址是 / 時，顯示這個元件」
`<Link to="/about">`	「點擊後導航到 /about」
`<NavLink to="/about">`	同 Link，但會自動加 active 樣式

Route 元件詳解

最小範例

<Route path="/users" element={<Users />} />
Code language: JavaScript (javascript)

翻譯：「當網址是 /users 時，顯示 Users 元件」

常見屬性

// 基本用法
<Route path="/users" element={<Users />} />

// index 路由（首頁）
<Route index element={<Home />} />

// 萬用路由（404 頁面）
<Route path="*" element={<NotFound />} />
Code language: JavaScript (javascript)

逐行翻譯

<Routes>                                    // 開始定義路由規則
  <Route index element={<Home />} />        // 首頁（路徑為父層路徑時顯示）
  <Route path="about" element={<About />} /> // /about 顯示 About
  <Route path="*" element={<NotFound />} />  // 其他網址顯示 404
</Routes>
Code language: PHP (php)

Routes 元件詳解

一句話說明

Routes 是「路由容器」，負責比對網址並只顯示第一個符合的 Route。

重要特性

// Routes 只會渲染「一個」符合的 Route
<Routes>
  <Route path="/about" element={<About />} />
  <Route path="/about" element={<AboutV2 />} />  {/* 這個不會顯示 */}
</Routes>
Code language: PHP (php)

翻譯：Routes 從上到下比對，找到第一個符合的就停止。

Link 元件詳解

最小範例

<Link to="/about">關於我們</Link>
Code language: HTML, XML (xml)

翻譯：「點擊後導航到 /about，不會重新載入整個頁面」

Link vs a 標籤

// Link（React Router）
<Link to="/about">關於</Link>
// 翻譯：切換畫面，不重新載入頁面（SPA 方式）

// a 標籤（傳統 HTML）
<a href="/about">關於</a>
// 翻譯：重新載入整個頁面（傳統方式）
Code language: PHP (php)

差異重點：

特性	Link	a 標籤
頁面重載	不會	會
狀態保留	保留	遺失
速度	快	慢

常見用法

// 基本導航
<Link to="/users">使用者列表</Link>

// 帶參數
<Link to="/users/123">查看使用者 123</Link>

// 帶 state（傳遞隱藏資料）
<Link to="/checkout" state={{ from: 'cart' }}>結帳</Link>
Code language: HTML, XML (xml)

NavLink 元件詳解

一句話說明

NavLink 和 Link 一樣，但會自動幫「目前頁面」加上 active 樣式。

最小範例

<NavLink to="/about">關於</NavLink>
Code language: HTML, XML (xml)

當網址是 /about 時，這個連結會自動加上 class="active"。

自訂樣式

// 方法 1：用 CSS 的 .active
<NavLink to="/about">關於</NavLink>
// CSS: .active { color: red; }

// 方法 2：用函式判斷
<NavLink
  to="/about"
  className={({ isActive }) => isActive ? "highlight" : "normal"}
>
  關於
</NavLink>

// 方法 3：用 style 屬性
<NavLink
  to="/about"
  style={({ isActive }) => ({ color: isActive ? "red" : "black" })}
>
  關於
</NavLink>
Code language: PHP (php)

逐行翻譯

<NavLink
  to="/about"                    // 導航目標
  className={({ isActive }) =>   // 根據是否 active 決定 class
    isActive ? "active" : ""     // 如果是目前頁面，加 active class
  }
>
  關於
</NavLink>
Code language: PHP (php)

index 路由（首頁路由）

一句話說明

index 路由就是「預設顯示的子頁面」。

範例

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />       {/* 首頁，網址是 / */}
    <Route path="about" element={<About />} /> {/* 網址是 /about */}
  </Route>
</Routes>
Code language: PHP (php)

翻譯：

進入 / 時，顯示 Layout + Home
進入 /about 時，顯示 Layout + About

404 頁面處理

一句話說明

用 path="*" 捕捉所有沒有匹配到的網址。

最小範例

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />   {/* 其他都顯示 404 */}
</Routes>

function NotFound() {
  return <h1>404 - 找不到頁面</h1>;
}
Code language: PHP (php)

重要：path="*" 要放在最後面，因為 Routes 是從上往下比對。

完整範例

import { BrowserRouter, Routes, Route, Link, NavLink } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 導航列 */}
      <nav>
        <NavLink to="/" end>首頁</NavLink>        {/* end 表示完全匹配 */}
        <NavLink to="/about">關於</NavLink>
        <NavLink to="/contact">聯絡</NavLink>
      </nav>

      {/* 路由設定 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() { return <h1>歡迎來到首頁</h1>; }
function About() { return <h1>關於我們</h1>; }
function Contact() { return <h1>聯絡資訊</h1>; }
function NotFound() { return <h1>404 - 頁面不存在</h1>; }

export default App;
Code language: JavaScript (javascript)

AI 常見寫法

寫法 1：路由獨立成檔案

// routes.jsx
export const routes = [
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
];

// App.jsx
import { routes } from './routes';
<Routes>
  {routes.map(route => <Route key={route.path} {...route} />)}
</Routes>
Code language: JavaScript (javascript)

翻譯：把路由設定抽出來，用陣列管理。

寫法 2：巢狀路由結構

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="users" element={<Users />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>
Code language: PHP (php)

翻譯：所有子路由都會在 Layout 裡面顯示（下一篇會詳細說明）。

Vibe Coder 檢查點

看到路由設定時確認：

[ ] 有沒有用 <Routes> 包住所有 <Route>？
[ ] 導航用的是 <Link> 還是 <a>？（應該用 Link）
[ ] 有沒有處理 404 頁面（path="*"）？
[ ] NavLink 有沒有正確設定 active 樣式？
[ ] index 路由有沒有處理首頁情況？

延伸：知道就好

這些進階功能遇到再查：

useNavigate：用程式碼導航（不是用點擊）
useLocation：取得目前網址資訊
useParams：取得網址參數（下一篇會教）
Outlet：巢狀路由的子內容顯示位置

進階測驗：React Router 基本路由配置

測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。

1. 你正在開發一個電商網站的導航列，需要讓使用者能清楚看到目前在哪個頁面。你應該使用哪種元件？情境題

// 導航列需求：
// – 首頁、商品、購物車、會員中心四個連結
// – 目前所在頁面的連結要有特殊樣式（底線或不同顏色）

A. 使用 <Link> 並用 JavaScript 判斷 window.location 來加樣式
B. 使用 <a> 標籤並搭配 CSS :active 選擇器
C. 使用 <NavLink> 並設定 className 或 style 屬性
D. 使用 <Route> 來判斷目前路徑並渲染不同樣式

2. 團隊成員寫了以下路由設定，但使用者反映輸入不存在的網址時看到空白頁面。問題出在哪裡？錯誤診斷

<Routes>
  <Route path=”*” element={<NotFound />} />
  <Route path=”/” element={<Home />} />
  <Route path=”/about” element={<About />} />
  <Route path=”/contact” element={<Contact />} />
</Routes>

A. NotFound 元件沒有正確匯出
B. path="*" 放在最前面，會攔截所有網址，應該放在最後
C. 應該使用 path="404" 而不是 path="*"
D. Routes 元件缺少 fallback 屬性

3. 你需要建立一個後台管理系統，所有頁面都共用同一個側邊欄和頂部導航。你應該如何設計路由結構？情境題

// 需求：
// – /admin 顯示後台首頁
// – /admin/users 顯示使用者管理
// – /admin/products 顯示商品管理
// – 所有頁面都有共用的 AdminLayout（側邊欄 + 頂部導航）

A. 在每個頁面元件中都引入 AdminLayout
B. 建立三個獨立的 Route，各自設定完整路徑
C. 使用 Routes 的 layout 屬性來指定共用版型
D. 使用巢狀路由，將 AdminLayout 作為父層 Route 的 element，子路由使用 Outlet 顯示

4. 以下程式碼中，使用者點擊「關於」連結後頁面整個重新載入，狀態也遺失了。問題在哪裡？錯誤診斷

function Navigation() {
  return (
    <nav>
      <Link to=”/”>首頁</Link>
      <a href=”/about”>關於</a>
      <Link to=”/contact”>聯絡</Link>
    </nav>
  );
}

A. Link 元件的 to 屬性應該使用 href
B. 所有連結都需要放在 Routes 元件內
C. 「關於」使用了 <a> 標籤而非 <Link>，導致頁面重新載入
D. nav 標籤需要改成 React Router 的 Nav 元件

5. 你在 NavLink 上設定了 `to="/"`，但發現不管使用者在 /about 還是 /contact 頁面，首頁連結都顯示 active 樣式。如何解決？情境題

<NavLink to=”/” className={({isActive}) => isActive ? “active” : “”}>
  首頁
</NavLink>
<NavLink to=”/about” className={({isActive}) => isActive ? “active” : “”}>
  關於
</NavLink>

A. 把首頁的 to 改成 to="/home"
B. 在首頁的 NavLink 加上 end 屬性，讓它只在完全匹配時才顯示 active
C. 使用 Link 元件取代 NavLink
D. 把 className 改成 activeClassName

測驗：React Router 基本路由配置

1. 在 React Router 中，<Link> 和 HTML 的 <a> 標籤有什麼主要差異？

2. <Routes> 元件的主要作用是什麼？

3. 如何設定一個 404 頁面來處理所有未匹配的網址？

4. <NavLink> 和 <Link> 的主要差異是什麼？

5. 在巢狀路由結構中，index 路由的作用是什麼？

一句話說明

前置知識

最小範例

核心元件翻譯

Route 元件詳解

最小範例

常見屬性

逐行翻譯

Routes 元件詳解

一句話說明

重要特性

Link 元件詳解

最小範例

Link vs a 標籤

常見用法

NavLink 元件詳解

一句話說明

最小範例

自訂樣式

逐行翻譯

index 路由（首頁路由）

一句話說明

範例

404 頁面處理

一句話說明

最小範例

完整範例

AI 常見寫法

寫法 1：路由獨立成檔案

寫法 2：巢狀路由結構

Vibe Coder 檢查點

延伸：知道就好

進階測驗：React Router 基本路由配置

1. 你正在開發一個電商網站的導航列，需要讓使用者能清楚看到目前在哪個頁面。你應該使用哪種元件？ 情境題

2. 團隊成員寫了以下路由設定，但使用者反映輸入不存在的網址時看到空白頁面。問題出在哪裡？ 錯誤診斷

3. 你需要建立一個後台管理系統，所有頁面都共用同一個側邊欄和頂部導航。你應該如何設計路由結構？ 情境題

4. 以下程式碼中，使用者點擊「關於」連結後頁面整個重新載入，狀態也遺失了。問題在哪裡？ 錯誤診斷

5. 你在 NavLink 上設定了 to="/"，但發現不管使用者在 /about 還是 /contact 頁面，首頁連結都顯示 active 樣式。如何解決？ 情境題

相關文章

【React Router 教學】#05 導航守衛與路由保護實戰

【React Router 教學】#04 巢狀路由與 Outlet 佈局

【React Router 教學】#03 動態路由與參數傳遞

發佈留言取消回覆

1. 在 React Router 中，`<Link>` 和 HTML 的 `<a>` 標籤有什麼主要差異？

2. `<Routes>` 元件的主要作用是什麼？

4. `<NavLink>` 和 `<Link>` 的主要差異是什麼？

5. 在巢狀路由結構中，`index` 路由的作用是什麼？

1. 你正在開發一個電商網站的導航列，需要讓使用者能清楚看到目前在哪個頁面。你應該使用哪種元件？情境題

2. 團隊成員寫了以下路由設定，但使用者反映輸入不存在的網址時看到空白頁面。問題出在哪裡？錯誤診斷

3. 你需要建立一個後台管理系統，所有頁面都共用同一個側邊欄和頂部導航。你應該如何設計路由結構？情境題

4. 以下程式碼中，使用者點擊「關於」連結後頁面整個重新載入，狀態也遺失了。問題在哪裡？錯誤診斷

5. 你在 NavLink 上設定了 `to="/"`，但發現不管使用者在 /about 還是 /contact 頁面，首頁連結都顯示 active 樣式。如何解決？情境題