作者:吳祐賓
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