ReactJS - Router

ReactJS - Router (路由)

现代 Web 应用通常需要在不同视图或页面之间导航。在 React 中，这通常由路由库处理。本章将指导你如何使用 React Router（React 最流行的路由库）在你的 React 应用中设置客户端路由。

我们将使用 React Router v6，它提供了一个现代的、基于 Hook 的 API。如果你曾使用过旧版本，你会注意到一些不同之处，但核心概念仍然直观易懂。

第一步 - 安装 React Router DOM

首先，你需要安装 react-router-dom 包。打开你的终端或命令行提示符，导航到你的项目目录，然后运行：

your-project-directory> npm install react-router-dom

或者如果你使用 Yarn：

your-project-directory> yarn add react-router-dom

第二步 - 创建组件

让我们为路由示例创建几个简单的组件。我们将有一个主 App 组件充当布局（包含导航链接），以及三个页面组件：Home、About 和 Contact。

在本例中，我们将在 App.js 和 main.js（或你的应用入口文件）中定义它们。在大型应用中，你通常会将每个组件放在自己的文件中（例如，components/Home.js）。

src/App.js (布局组件)

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

function App() {
    return (
        <div>
            <nav>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/contact">Contact</Link></li>
                </ul>
            </nav>
            <hr />
            {/* Outlet 组件会渲染匹配到的子路由元素 */}
            <Outlet />
        </div>
    );
}

export default App;

src/pages/Home.js (页面组件)

import React from 'react';

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

export default Home;

src/pages/About.js (页面组件)

import React from 'react';

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

export default About;

src/pages/Contact.js (页面组件)

import React from 'react';

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

export default Contact;

此处介绍的主要变化和概念：

Link：用于代替 <a> 标签，在路由之间导航，而无需完全刷新页面。它更新 URL 并让 React Router 渲染相应的组件。
Outlet：react-router-dom 中的一个组件，在父路由元素（此处是 App）中充当占位符，以渲染匹配到的子路由组件。

第三步 - 配置路由

现在，让我们设置路由配置。这通常在你的主应用文件（例如 src/main.js 或 src/index.js）中完成。我们将使用 BrowserRouter 启用基于 HTML5 History API 的路由，并使用 Routes 定义我们的路由映射。

src/main.js (或 src/index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<App />}>
                    {/* 父路径 "/" 的索引路由 */}
                    <Route index element={<Home />} />
                    <Route path="about" element={<About />} />
                    <Route path="contact" element={<Contact />} />
                </Route>
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
);

路由配置解释：

BrowserRouter：包裹你的整个应用（或需要路由的部分）以启用客户端路由。它使用浏览器的 History API 使 UI 与 URL 保持同步。
Routes：包含多个 Route 组件的容器。它根据当前 URL 智能选择最佳的 Route 进行渲染。
Route：定义了一个 URL 路径和 React 组件之间的映射。
- path 属性指定 URL 片段。
- element 属性接收一个 React 元素（例如 <YourComponent />），用于在路径匹配时渲染。
- 嵌套路由：请注意 Home、About 和 Contact 路由是如何嵌套在 App 路由中的。这意味着 App 充当布局组件，而 App 中的 Outlet 将根据路径渲染 Home、About 或 Contact。
- index 路由：<Route index element={<Home />} /> 指定当父路由路径（此处是 /）完全匹配时，默认要渲染的组件。它就像一个默认的子路由。

当你运行你的应用时，你会看到导航链接。点击它们会改变 URL 并在 App 布局内渲染相应的页面组件，而无需完全刷新页面。

这种配置演示了一个常见的模式：包含导航的主应用外壳 (App)，以及根据路由显示不同页面组件的内容区域 (Outlet)。

进一步学习：

React Router 提供了更多功能，如 URL 参数、嵌套路由、程序化导航和路由保护。更多深入的信息，请查看官方 React Router 文档：https://reactrouter.com/