React 如何讓路由獨立出來？

路由顧名思義，其實背後指的是元件之間的切換。在切換的同時，頁面的 URL 欄位也會出現對應的二級目錄文字變化。

所謂「路由獨立」，其實就是把原本寫在 App.jsx 裡面的 <Routes> 與 <Route>，拆分到專門的 router 資料夾中管理。

在 React 工程化開發過程中，將 Router 獨立出來，是為了把「頁面佈局」與「頁面跳轉邏輯」分開管理。

App.jsx 只負責整體介面結構，例如側邊欄、頂部與主內容區，而 router 則專門負責「哪個 URL 對應顯示哪個頁面」。

這樣可以讓程式的職責更加清晰，當後期頁面逐漸增加時，也不會讓 App.jsx 變得越來越臃腫。同時，也更方便統一管理路由、權限控制、懶加載（Lazy Loading）以及 404 頁面等功能。

這是 React 大型專案中相當常見的工程化架構方式。

React 專案中安裝路由

在 React 專案中，可以使用 npm install react-router-dom 安裝 React 路由套件。

只需要利用 VSCode 開啟專案後，打開終端機（Terminal），輸入以上指令並按下 Enter 回車，即可自動完成安裝。

建議使用路由專用資料夾

企業級專案會根據規模大小配置不同的路由結構，但較合理、常見的結構通常是：

src/
├─ router/
│ ├─ index.jsx // 路由入口
│ ├─ routes.jsx // 路由配置
│ ├─ permission.jsx // 權限控制（可選）
│ └─ modules/ // 模組化路由（大型專案）

而我目前的結構是：

src/
├─ router/
│ ├─ index.jsx // 路由入口 / 路由配置 / 權限控制

也就是將所有路由相關邏輯都集中在同一個 jsx 檔案裡。

路由內的程式碼構成

路由內的程式碼主要由三個部分構成：首先是引入路由功能與各個頁面元件；接著使用 Routes 作為容器來包裹所有路由；

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

import Dashboard from "../pages/Dashboard";
import SpotMap from "../pages/SpotMap";
import ActiveRecords from "../pages/ActiveRecords";
import History from "../pages/History";
import Vehicles from "../pages/Vehicles";
import UserManagement from "../pages/UserManagement";

export default function Router() {
  return (
    <Routes>

      <Route
        path="/"
        element={<Dashboard />}
      />

      <Route
        path="/spots"
        element={<SpotMap />}
      />

      <Route
        path="/active"
        element={<ActiveRecords />}
      />

      <Route
        path="/history"
        element={<History />}
      />

      <Route
        path="/vehicles"
        element={<Vehicles />}
      />

      <Route
        path="/users"
        element={<UserManagement />}
      />

    </Routes>
  );
}

最後透過 Route 來設定每個 URL 對應的頁面，從而實現不同頁面之間的切換與跳轉。

開啟路由

開啟路由時，需要先從 react-router-dom 中引入 BrowserRouter 和 Link 等路由相關功能，然後在入口元件中進行包裹使用。

例如：

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

引入完成後，需要在應用的最外層開啟路由功能，一般是在 App.jsx 中使用：

<BrowserRouter>
  <Router />
</BrowserRouter>

這樣就完成了路由的開啟，其中 <Router /> 是你自己定義的路由元件，用來集中管理所有頁面的路徑與跳轉規則，並放置在指定位置進行渲染。