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