React Router 入门教程：构建记账应用

React Router 入门教程：构建记账应用

react-router 项目地址: https://gitcode.com/gh_mirrors/reac/react-router

前言

React Router 是 React 生态中最流行的路由解决方案之一，它提供了完整的客户端和服务器端路由功能。本教程将带你快速上手 React Router 的核心概念，通过构建一个简单的记账应用来掌握日常开发中最常用的 API。

环境准备

快速开始方式

推荐使用在线开发环境来跟随本教程，这样可以免去本地环境配置的麻烦。创建一个新的 React 项目并添加 React Router 依赖：

npm install react-router-dom@6

项目初始化

初始化一个简单的 React 应用结构：

// src/App.js
export default function App() {
  return (
    <div>
      <h1>Bookkeeper!</h1>
    </div>
  );
}

// src/main.jsx
import * as ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(<App />);

基础路由配置

连接浏览器路由

首先需要将应用与浏览器 URL 连接起来：

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

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

BrowserRouter 是 React Router 提供的组件，它使用 HTML5 History API 来保持 UI 与 URL 同步。

创建导航链接

添加基本的导航结构：

import { Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav>
        <Link to="/invoices">Invoices</Link>
        <Link to="/expenses">Expenses</Link>
      </nav>
    </div>
  );
}

Link 组件用于创建导航链接，点击时不会导致页面刷新。

配置路由映射

创建路由组件并配置路由映射：

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

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>
);

嵌套路由与布局

嵌套路由结构

React Router 支持嵌套路由，这对于实现共享布局非常有用：

<Routes>
  <Route path="/" element={<App />}>
    <Route path="expenses" element={<Expenses />} />
    <Route path="invoices" element={<Invoices />} />
  </Route>
</Routes>

使用 Outlet 渲染子路由

在父路由组件中添加 Outlet 来渲染子路由：

import { Outlet } from "react-router-dom";

function App() {
  return (
    <div>
      {/* 导航链接 */}
      <Outlet />
    </div>
  );
}

动态路由与参数

创建动态路由

使用冒号语法定义动态路由参数：

<Route path="invoices">
  <Route path=":invoiceId" element={<Invoice />} />
</Route>

获取路由参数

在组件中使用 useParams 获取动态参数：

import { useParams } from "react-router-dom";

function Invoice() {
  let params = useParams();
  return <h2>Invoice: {params.invoiceId}</h2>;
}

高级功能

索引路由

索引路由在父路由匹配但没有其他子路由匹配时渲染：

<Route path="invoices" element={<Invoices />}>
  <Route index element={<InvoiceList />} />
  <Route path=":invoiceId" element={<InvoiceDetail />} />
</Route>

活动链接样式

使用 NavLink 可以轻松实现活动状态样式：

<NavLink
  style={({ isActive }) => ({
    color: isActive ? "red" : "blue"
  })}
  to="/invoices"
>
  Invoices
</NavLink>

数据加载与路由

模拟数据加载

创建数据模块并实现简单的数据获取：

// src/data.js
export function getInvoice(number) {
  return invoices.find(
    invoice => invoice.number === number
  );
}

在组件中使用数据

function Invoice() {
  let params = useParams();
  let invoice = getInvoice(parseInt(params.invoiceId, 10));
  return (
    <div>
      <h2>{invoice.name}</h2>
      {/* 其他发票信息 */}
    </div>
  );
}

错误处理

404 页面处理

使用通配符路由处理未匹配的路径：

<Route
  path="*"
  element={<NotFound />}
/>

总结

通过本教程，我们学习了 React Router 的核心概念：

1. 基本路由配置与导航
2. 嵌套路由与共享布局
3. 动态路由参数处理
4. 索引路由的特殊用法
5. 活动链接状态管理
6. 路由与数据加载的结合

这些知识足以应对大多数前端路由需求。React Router 的强大之处在于其灵活性和可组合性，随着应用的复杂化，你可以进一步探索更高级的功能如懒加载、路由守卫等。

记住，良好的路由设计应该反映你的应用信息架构，让 URL 成为应用状态的可预测表示。

react-router 项目地址: https://gitcode.com/gh_mirrors/reac/react-router