大匠之風: 如何在 React 18 使用 React Router v6.4 建立路由，超簡單

React Router 目的在實現"客戶端路由" (Client Site Routing)。官方文件是這麼介紹的：

在傳統網站(Server Site)，瀏覽器從網站服務端下載文件，解析 CSS 和 JavaScript 資源，之後呈現服務端所要顯示的 HTML 內容。當使用者點擊網頁內的超連結時，它會在頁面(同一個或新頁面)上重新啟動此流程。

客戶端路由可以實現在您的頁面透過點擊超連結更新 URL 時，不需要再從網站服務端再次下載另一個文件。您的頁面可以立即顯示一些新的 UI，並使用 fetch 實現 AJAX，以新資訊來刷新頁面。來讓使用者有更好的操作體驗

React Router 和 React Redux 幾乎是 React 開發者必須會學會的函式庫，本篇文章會逐步帶你邊做邊學如何在 React 18 使用 React Router v6 建立路由，超簡單

前置作業：安裝 pnpm 管理 npm 套件

因為 pnpm 官方是這麼說的：

使用 npm 時，若您有 100 件專案都使用了同個依附套件，磁碟中就會有 100 份該套件的副本。反之，有了 pnpm，該依附套件會被儲存在一個由內容定址的儲存區，因此：

如果您同時需要該依附套件的不同版本，只有存在差異的檔案才會被加入儲存區。例如，如果此依賴套件有 100 個檔案，而新的版本僅變更其中一個檔案，則 pnpm update 將只會新增一個新的檔案到儲存庫中，而不會為了單一檔案的變更而複製整個依賴套件。
所有依賴套件的檔案將被儲存在磁碟中的單一位置。當依賴套件被安裝時，依賴套件的檔案會被硬鏈結至該位置，不會消耗額外的磁碟空間。這將允許您在不同專案之間共享相同版本的依賴套件。

由於上述原因，您將節省大量的磁碟空間，這將與您的專案和依賴套件的數量成正比，並且將大幅提升安裝的速度！

所以我現在也改用 pnpm 來管理 npm 套件：

npm install -g pnpm

Step 1. 建立新的 React 應用程式

使用 pnpm 建立 React 應用程式：

pnpm create vite my-react-router --template react

移動到建立的目錄中

cd my-react-router

安裝專案所需套件

pnpm install

Step 2. 建立呈現的頁面

在資料夾 src 中建立 pages 資料夾

接著在資料夾 src/pages 建立 Home.jsx

const Home = () => <div>Home</div>
export default Home

接著在資料夾 src/pages 建立 Content.jsx

const Content = () => <div>Content</div>
export default Content

接著在資料夾 src/pages 建立 About.jsx

const About = () => <div>About Me</div>
export default About

Step 3. 安裝本次主角： React Router npm 套件

使用官方教學的安裝指令進行安裝：

pnpm install react-router-dom localforage match-sorter sort-by

Step 4. 註冊 Router

這裡註冊 Router 的意思是指建立一個路由分配器，建立時也一併新建路徑及對應頁面，打開 src/main.jsx，修改後文件應該會如下表所示。

src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Home from "./pages/Home"
import Content from "./pages/Content"
import About from "./pages/About"

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "Home",
        element: <Home />,
      },
      {
        path: "content",
        element: <Content />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

因為我計畫在 Root Layout 裡切換分頁，所以在 root 裡加入 children 內容。

Step 5. 製作導覽功能

開啟 src/App.jsx ，並加入導覽介面，將以下程式碼置換原模板內容

src/App.jsx

import './App.css'
import { Routes, Route, NavLink, Outlet } from "react-router-dom";
import Home from './pages/Home'
import Content from './pages/Content';
import About from './pages/About';

function Layout() {
  return (
    <>
      <header>
        <h1>My Super Cool App</h1>
        <NavLink to="/">首頁</NavLink>
        <NavLink to="/content">內容</NavLink>
        <NavLink to="/about">關於</NavLink>
      </header>
      <main>
        <Outlet />
      </main>
      <footer>©️ Eden 2024</footer>
    </>
  );
}

function App() {
  return (
    <>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/content" element={<Content />} />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
    </>
  )
}

export default App

在同一頁進行切換頁面的場合下，會需要在 App 裡增加 Layout 層級，並使用 Router Outlet 來顯示 Route 內容。

Step 6. 啟動瀏覽器執行 React 應用程式

使用以下指令啟動 Web 服務：

pnpm run dev

按照預設值，您可以透過以下網址進入 React 應用程式

http://localhost:5173/

畫面應該長成這樣：

總結

本篇介紹 pnpm 套件管理器的好處，以及 Vite 建立 React 應用程式的方法，和 React Router v6.4 的使用。在 Router v6.4 中，由於添加 Remix Data APIs，所以原作者開始推薦使用 RouterProvider 來替代舊版 <BrowserRouter> 的使用，所以這篇文章的寫法可能會和你之前所學過的不太一樣。目前 BrowserRouter 仍然可以相容使用，不過身為前端工程師的我們，還是得接受前端技術會不斷進化的現實。學吧！一起加油！

和你分享

大匠之風

網頁

2024/01/19

如何在 React 18 使用 React Router v6.4 建立路由，超簡單