React Router：概念與實用指南（第 1 部分）-js教程-PHP中文網

React Router: Concepts and Practical Guide(Part 1)

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

簡介

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

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

什麼是 React Router？

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

React Router 的主要特性

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

安裝 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;

登入後複製

說明：

path="/"：此路由匹配根 URL (/) 並渲染 Home 元件。
path="/about"：匹配 /about 並渲染 About 元件。
當 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 以查看「關於」頁面。
頁面動態更新，無需重新載入。

後續步驟

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

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

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

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

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

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