React Router 入門

React Router 入門

React Router 是 React 應用中的一個標準庫，用於實現客戶端路由。它允許我們在單頁應用（SPA）中根據 URL 的變化切換組件，實現多頁效果而不需要實際刷新頁面。

什麼是單頁應用（SPA）？

單頁應用是指整個應用只有一個 HTML 文件，所有的內容和頁面都在這個頁面上通過 JavaScript 來動態切換。React Router 就是用來控制 SPA 中不同 “頁面” 的切換。

---

1. React Router 的安裝

在使用 React Router 之前，需要先安裝它：

npm install react-router-dom

或使用 pnpm：

pnpm add react-router-dom

---

2. React Router 的核心組件

React Router 提供了幾個核心組件來幫助我們實現路由功能：

1. BrowserRouter：用來包裹應用，提供路由功能。
2. Routes 和 Route：用來定義不同的路徑以及對應顯示的組件。
3. Link：用來創建導航連結。
4. useNavigate：提供編程式導航功能，允許在事件觸發時進行路由跳轉。
5. useParams：用來提取路由參數。

---

3. React Router 的基本用法

(1) 路由配置

首先，我們需要使用 BrowserRouter 包裹整個應用，然後使用 Routes 和 Route 定義路徑和對應的組件。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function Home() {
  return <h1>首頁</h1>;
}

function About() {
  return <h1>關於我們</h1>;
}

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

export default App;

在這個範例中，我們定義了兩個路徑：

• /：對應 Home 組件。
• /about：對應 About 組件。

當我們訪問 /about 時，React Router 會顯示 About 組件的內容。

(2) 使用 Link 進行導航

為了在應用內進行導航，我們可以使用 Link 組件，它會生成一個連結，並在點擊時進行路由切換而不會刷新頁面。

import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <nav>
      <Link to="/">首頁</Link>
      <Link to="/about">關於我們</Link>
    </nav>
  );
}

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

---

4. 動態路由

React Router 支持動態路由，允許我們在 URL 中定義變數。這對於需要根據不同參數來顯示內容的頁面（例如用戶詳情頁）非常有用。

(1) 定義動態路由

動態路由可以通過 :param 的方式來定義，例如：

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

這裡的 :id 就是一個路由參數。

(2) 提取路由參數

我們可以使用 useParams Hook 來獲取路由中的參數：

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

function User() {
  const { id } = useParams();
  
  return <h1>用戶 ID: {id}</h1>;
}

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

當我們訪問 /user/123 時，頁面上會顯示 用戶 ID: 123。

---

5. 編程式導航

有時我們需要在特定條件下通過程式進行路由切換，例如按鈕點擊後跳轉。這時可以使用 useNavigate Hook。

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

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

  const goToAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>首頁</h1>
      <button onClick={goToAbout}>跳轉到關於我們</button>
    </div>
  );
}

當用戶點擊按鈕後，將會跳轉到 /about 頁面。

---

6. 路由嵌套

React Router 也支持嵌套路由，允許我們在某個父路徑下定義子路徑。

(1) 定義嵌套路由

function Dashboard() {
  return (
    <div>
      <h1>控制台</h1>
      <nav>
        <Link to="profile">個人資料</Link>
        <Link to="settings">設置</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Profile() {
  return <h2>個人資料</h2>;
}

function Settings() {
  return <h2>設置</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
}

在這個範例中，Dashboard 組件是父組件，並且在其中通過 Outlet 渲染子路徑 profile 和 settings 對應的組件。當訪問 /dashboard/profile 時，會顯示 Profile 組件。

---

7. 404 頁面

我們可以定義一個路由來處理找不到的頁面，即 “404 Not Found” 頁面：

function NotFound() {
  return <h1>404 - 頁面找不到</h1>;
}

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

當用戶訪問一個未定義的路徑時，會顯示 NotFound 組件中的 404 錯誤信息。

---

8. React Router 的重定向

有時候，我們需要在訪問某個路徑時自動重定向到另一個路徑。可以使用 Navigate 組件來實現這一點。

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/old-path" element={<Navigate to="/new-path" />} />
        <Route path="/new-path" element={<NewPage />} />
      </Routes>
    </Router>
  );
}

當用戶訪問 /old-path 時，將自動重定向到 /new-path。

---

總結

React Router 是實現單頁應用中路由管理的強大工具。通過學習基本的 BrowserRouter、Route、Link 以及動態路由、嵌套路由等功能，我們可以輕鬆實現複雜的應用路由邏輯。使用編程式導航和 404 處理還能進一步提升用戶體驗。