React Router：概念與實用指南（第 1 部分）

React Router 終極指南：概念與實用指南

簡介

路由是任何現代 Web 應用程式的基本功能。它允許用戶在不同部分或頁面之間無縫導航，從而創建流暢的互動體驗。在 React 中，這是使用 React Router 實現的，這是一個強大的函式庫，旨在處理單頁應用程式 (SPA) 中的路由。

React Router 簡化了建立動態和巢狀路由、處理 URL 參數、實作受保護路由等的過程。在這份綜合指南中，我們將探索 React Router 的各個方面，逐步分解其概念並透過實際範例實現它們。

---

什麼是 React Router？

React Router 是一個聲明性的、基於元件的函式庫，用於管理 React 應用程式中的路由。它使用現代方法將 URL 映射到元件，使開發人員能夠輕鬆建立可擴展的動態 SPA。

React Router 的主要特性

1. 聲明式路由：將路由定義為元件，這使得路由系統易於理解和維護。
2. 動態路由：處理 /user/:id 等 URL 中的動態參數，以建立靈活且可重複使用的路由。
3. 巢狀路由：分層組織路由，實現父子關係。
4. 受保護的路由：在驗證或授權之後保護特定路由。
5. 編程式導航：依照使用者操作以程式設計方式在頁面之間導航。
6. 支援瀏覽器歷史記錄：與瀏覽器的導航同步，包括前進、後退和刷新操作。

---

安裝 React Router

在開始之前，讓我們在您的專案中設定 React Router。使用npm或yarn安裝庫：

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

安裝後，您就可以將 React Router 整合到您的應用程式中。

---

React Router 的核心概念

React Router 圍繞著幾個核心概念展開，這些概念構成了其路由系統的基礎。讓我們一步步分解。

---

1. BrowserRouter 與路由器組件

在 React 應用程式的頂層，您需要將所有內容包裝在 Router 中。 React Router 提供了多種類型的路由器，但最常見的一種是 BrowserRouter，它使用瀏覽器的歷史記錄 API 來管理導航。

BrowserRouter 的重點

• 它提供了路由所需的上下文。
• 它監聽瀏覽器 URL 的變化並相應地重新渲染元件。
• 其他類型的路由器，例如 HashRouter，在 URL 中使用雜湊 (#) 進行導航，但 BrowserRouter 在現代應用程式中更常用。

如何使用BrowserRouter

這是使用 BrowserRouter 的基本範例：

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

說明：

• 我們從react-router-dom導入BrowserRouter。
• BrowserRouter 元件包裝整個應用程式以啟用路由功能。

注意：應用程式的根目錄下只能有一個 BrowserRouter。

---

2.路線與路線組件

使用 BrowserRouter 包裝您的應用程式後，您可以使用 Routes 和 Route 元件定義單獨的路由。

什麼是路由和路由元件？

• 路線：應用程式中所有路線的容器。
• Route：代表單一路由，定義：
  • path：要符合的 URL 路徑。
  • element：路徑匹配時要渲染的 React 元件。

基本範例

import React from "react";
import { BrowserRouter } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div>
                <h1>Welcome to My App</h1>
                <p>Routing starts here!</p>
            </div>
        </BrowserRouter>
    );
}

export default App;

說明：

1. path="/"：此路由匹配根 URL (/) 並渲染 Home 元件。
2. path="/about"：匹配 /about 並渲染 About 元件。
3. 當 URL 發生變化時（例如 /about），React Router 會自動渲染對應的元件。

---

3.連結與導航連結元件

在 React 應用程式中，使用傳統的 導航標籤會導致瀏覽器重新載入頁面。 React Router 提供了 Link 和 NavLink 元件，無需刷新頁面即可無縫導航。

連結組件

連結元件可讓您透過更新 URL 來在路由之間導航，而無需重新載入頁面。

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

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

function About() {
    return <h1>About Page</h1>;
}

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

export default App;

說明：

• 連結 取代傳統的 標籤。
• 使用 to 屬性指定目標路徑。

NavLink 組件

NavLink 元件與 Link 類似，但它允許您根據連結是否處於活動狀態來設定連結樣式。

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

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

function About() {
    return <h1>About Page</h1>;
}

function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </nav>
    );
}

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

export default App;

主要區別：

• NavLink 元件新增了一個 activeClassName（或 isActive）屬性來設定活動連結的樣式。

---

把它們放在一起

讓我們將這些概念組合到一個小範例應用程式中：

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

輸出：

• 導覽至 / 查看首頁。
• 導航至 /about 以查看「關於」頁面。
• 頁面動態更新，無需重新載入。

---

後續步驟

在這一部分中，我們介紹了基礎知識：

1. React Router 是什麼以及它是如何運作的。
2. 設定 BrowserRouter。
3. 使用 Routes 和 Route 定義路線。
4. 新增 Link 和 NavLink 導覽。

在下一篇文章中，我們將探討：

• 巢狀路由
• 動態路線
• 處理 URL 參數

請關注本React Router 終極指南系列的下一篇！

以上是React Router：概念與實用指南（第 1 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！