如何在 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 仍然可以相容使用，不過身為前端工程師的我們，還是得接受前端技術會不斷進化的現實。學吧！一起加油！

和你分享

See also

• pnpm 使用 npm 安裝
  
• React 18 で React Router v6 を使用してルートを作成する方法
• React Router

 

2 種在 Windows 下快速刪除 node_modules 的方法

作者：吳祐賓

使用 Node.js 練習開發 JavaScript 專案時，或多或少會遇到需要刪除 node_modules 目錄的情況。以 create-react-app 為例，安裝完成時，node_modules 就有 39,674 個檔案，5,060 個資料夾，約 234 MB。檔案大小估且不計，但 39,674 個檔案光是刪除就要花很多的時間。

糟糕的刪除方式

Windows 常見的刪除有 2 種：移至資源回收筒、檔案總管下 Shift+ DELETE 直接刪除。這 2 種都是糟糕到不行的刪除方式。

移至資源回收筒

搬到資源回收筒目錄，還需要再刪除一次。

檔案總管下 Shift+ DELETE 直接刪除

刪除資料前還需為花費大量時間為每個檔案進行檢查。

除了刪除 node_modules 之外，如果你的目錄也是零碎檔案很多時，也會有相同的問題。這似乎是 Windows 的問題，有沒有可以解決刪除花費大量時間的方法呢？答案是有的，而且還有 2 種：使用 npm rimraf、使用 dos command。

2 種快速删除 node_modules 的方法

使用 npm rimraf

isaacs 製作了名叫 "rimraf" 的 npm 套件，作者對此套件的說明如下：

The UNIX command rm -rf for node.

Install with npm install rimraf.

作者復刻 Unix 的 rm 指令(remove)，藉由 npm 的架構，讓此套件能跨平台使用。

rimraf 安裝

npm install rimraf -g # 可全域使用

rimraf 使用

rimraf node_modules # 移除 node_modules 目錄

使用 Dos Command

上述內容可以知道使用 Windows 檔案總管刪除資料並不是這麼理想，不過使用 Dos Command 可是非常有效率的，你可以使用  rmdir /s/q [FolderName]  刪除整個目錄其指令；或使用  del /f/s/q [FolderName]  刪除所有檔案，只是 del 的指令仍會保留目錄及子目錄結構。整理之後的指令如下：

del /f/s/q node_modules > nul
rmdir /s/q node_modules

nul 的用意是不要把刪除的流程顯示出來，盡可能地加快刪除效率。

StackOverflow 有網友測試了 WinXP 加密磁碟下刪除了 30GB / 1,000,000 個檔案 / 15,000 個資料夾，rmdir 使用約 2.5 小時；del + rmdir 則約 53 分鐘。

於是可以將以上指令濃縮在一行處理：

del /f/s/q node_modules > nul &&  rmdir /s/q node_modules

可以確保刪除 node_modeuls 內檔案成功後，再刪除 node_modeuls 資料夾結構。

del 命令說明：

• /f - 強制刪除 (僅管是唯讀的)
• /s - 遞迴子資料夾
• /q - 安靜執行 (不會有提示給使用者確認)

rmdir 命令說明：

• /s - 遞迴子資料夾 (和 del /s 參數指令相同)
• /q - 安靜執行 (和 del /q 參數指令相同)

製作 rm.bat 快速刪除指定資料夾

REM rm.bat
@echo off
if "%1"=="" (
    echo Usage: rm.bat ^<directory^>
    exit /b 1
)

set "target_directory=%1"

echo Deleting %target_directory%...
del /f /s /q "%target_directory%" > nul
rmdir /s /q "%target_directory%"

echo Cleanup complete.
exit /b 0

結論

本文介紹 Windows 刪除檔案最常用的方式在刪除 node_modules 目錄時會引發可能的災難。進而說明更有效率的刪除方式有 npm rimraf 和 Dos Command 兩種方式。rimraf 可以讓刪除功能在各家平台都能保持其一致性，Dos Command 則能在 Windows 平台下發揮其最大效能。我個人會偏好使用 Dos Command 並使用批次檔讓執行變得更加容易。不過我相信您在看完這份文件後也可以挑選出適合您的方案。有任何想法都歡迎留言。

和你分享。

See also

• What's the fastest way to delete a large folder in Windows?
• windows下快速删除node_modules
• 文首圖片來源：攝影師：Pixabay: https://www.pexels.com/zh-tw/photo/40784/