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中文网其他相关文章！