React Router 入门教程：构建一个简单的记账应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00210/article/details/148324520

React Router 入门教程：构建一个简单的记账应用

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

前言

React Router 是 React 生态中最流行的路由解决方案之一，它允许开发者构建单页应用(SPA)时实现客户端路由功能。本教程将带你从零开始，使用 React Router 构建一个简单的记账应用，涵盖路由配置、导航、嵌套路由等核心概念。

环境准备

快速开始（推荐）

对于初学者，建议使用在线开发环境来跟随本教程。这种方式无需配置本地开发环境，可以直接在浏览器中编写代码。

本地开发环境

如果你更喜欢在本地开发，可以使用以下任一方式创建 React 项目：

# 使用 Create React App
npx create-react-app router-tutorial

# 或使用 Vite
npm init vite@latest router-tutorial --template react

然后安装 React Router 依赖：

cd router-tutorial
npm install react-router-dom@6

基础路由配置

连接浏览器 URL

首先，我们需要将应用与浏览器 URL 连接起来。修改入口文件（通常是 main.jsx 或 index.js）：

import * as ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

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

BrowserRouter 组件会监听 URL 变化并保持 UI 与 URL 同步。

创建导航链接

在 App.js 中添加一些导航链接：

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

export default function App() {
  return (
    <div>
      <h1>记账应用</h1>
      <nav>
        <Link to="/invoices">发票</Link>
        <Link to="/expenses">支出</Link>
      </nav>
    </div>
  );
}

现在点击链接会改变 URL，但还没有内容显示，因为我们还没有配置路由。

配置路由

创建路由组件

首先创建两个页面组件：

src/routes/invoices.jsx - 发票列表页
src/routes/expenses.jsx - 支出列表页

// invoices.jsx
export default function Invoices() {
  return <h2>发票列表</h2>;
}

// expenses.jsx
export default function Expenses() {
  return <h2>支出列表</h2>;
}

定义路由配置

在入口文件中配置路由：

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";

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

注意我们将 /expenses 和 /invoices 路由嵌套在 / 路由下，这为嵌套布局奠定了基础。

添加 Outlet 组件

修改 App.js 添加 Outlet 组件：

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

export default function App() {
  return (
    <div>
      {/* 导航和标题 */}
      <Outlet />
    </div>
  );
}

Outlet 是子路由内容的渲染位置，这样父路由的布局（如导航栏）会保持不变，只有子路由部分内容会变化。

高级路由功能

动态路由参数

让我们为发票添加详情页。首先创建发票数据：

// data.js
export const invoices = [
  { id: 1, name: "项目A", amount: "$1000" },
  { id: 2, name: "项目B", amount: "$2000" }
];

然后创建发票详情组件：

// routes/invoice.jsx
import { useParams } from "react-router-dom";
import { getInvoice } from "../data";

export default function Invoice() {
  let params = useParams();
  let invoice = getInvoice(parseInt(params.invoiceId));
  return (
    <div>
      <h2>发票详情: {invoice.name}</h2>
      <p>金额: {invoice.amount}</p>
    </div>
  );
}

更新路由配置：

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

:invoiceId 是一个动态段，匹配的值会作为参数传递给组件。

索引路由

当用户访问 /invoices 但还没有选择具体发票时，我们可以显示一个提示：

<Route path="invoices" element={<Invoices />}>
  <Route index element={<p>请选择一个发票</p>} />
  <Route path=":invoiceId" element={<Invoice />} />
</Route>

索引路由会在父路由匹配但没有子路由匹配时渲染。

活动链接样式

使用 NavLink 可以轻松实现活动链接的高亮效果：

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

<NavLink
  to={`/invoices/${invoice.id}`}
  style={({ isActive }) => ({
    color: isActive ? "red" : "black"
  })}
>
  {invoice.name}
</NavLink>