---
tags: [frontend, react, react-router, routing, spa]
create time: 2026-04-25 15:30
---

# 路由原理：BrowserRouter 与组件协作

## 概述

本文梳理 React Router 的核心组件如何配合完成单页应用（SPA）的路由跳转。重点理解 `<BrowserRouter>` 作为"路由引擎"的作用，以及 `NavLink`、`Routes`、`Route`、`Navigate` 等组件的职责分工。

---

## 正文

### `<BrowserRouter>` 的核心作用

`<BrowserRouter>` 就是 React Router 的**"总开关"和"运行环境"**，没有它，路由组件无法正常工作。

```tsx
<BrowserRouter>
  <App />
</BrowserRouter>
```

它做三件事：

1. **提供路由上下文** — 让 `Routes`、`Route`、`NavLink` 知道当前路径是什么、该显示哪个页面
2. **无刷新切换页面** — 基于浏览器的 `History API`，URL 变了但整页不会刷新
3. **全局可用** — 因为它包住了 `<App />`，其所有子组件都能使用路由能力

> 💡 **想一想**：为什么 `<BrowserRouter>` 必须包裹 `<App />` 而不是只包某个子组件？
> 
> 如果它只包了 `<Routes>` 但没有包 `<NavLink>`，点击导航按钮会报错：
>
> ```
> Uncaught Error: useHref() may be used only in the context of a <Router> component
> ```
>
> 因为 `NavLink` 内部通过 React Context 读取路由数据，如果它处于 `<BrowserRouter>` 之外，就**读不到任何路由信息**，只能直接崩溃。

### 组件职责类比

| 组件 | 类比角色 | 一句话说明 |
|------|---------|-----------|
| `<BrowserRouter>` | 交通系统 | 提供整个路由的运行环境 |
| `NavLink` | 路牌 / 入口 | 用户点击后触发路径切换 |
| `Routes` | 调度中心 | 读取当前路径，决定走哪条路 |
| `Route` | 目的地 | 定义"路径 → 页面"的映射 |
| `Navigate` | 自动转弯 | 把用户重定向到另一个路径 |

### 路由流程

当用户点击左侧导航栏的"课程管理"时，背后发生了什么？

```mermaid
flowchart LR
    A[用户点击 NavLink] --> B[URL 变为 /courses]
    B --> C[Routes 读取当前路径]
    C --> D{匹配哪个 Route?}
    D -->|path=/courses| E[渲染 CoursesPage]
    D -->|无匹配| F[不显示任何页面]
    E --> G[页面切换完成，整页未刷新]
```

逐帧拆解：

1. `NavLink to="/courses"` 将浏览器地址变为 `/courses`
2. `Routes` 读取当前路径
3. 匹配到 `<Route path="/courses" element={<CoursesPage />} />`
4. `CoursesPage` 组件渲染

整个过程**地址栏变了、组件切换了、但页面没有刷新**。

### 实际代码中的用法

**路由声明**（`App.tsx`）：

```tsx
// 根路径自动跳转到 dashboard（replace 不留后退痕迹）
<Route path="/" element={<Navigate to="/dashboard" replace />} />

// 正常路由映射
<Route path="/dashboard" element={<DashboardPage />} />
<Route path="/courses" element={<CoursesPage />} />
```

**导航链接**：

```tsx
<NavLink to="/courses">课程管理</NavLink>
```

**解读**：`<Route path="/" element={<Navigate to="/dashboard" replace />} />` 表示当用户访问根路径 `/` 时，自动跳转到 `/dashboard`。`replace` 参数会让浏览器用新路径替换当前历史记录，这样用户按"后退"按钮不会回到登录页。

### 为什么不能去掉 `<BrowserRouter>`？

路由组件需要"上下文"才知道当前路径是什么、该往哪里跳。如果去掉 `<BrowserRouter>`：

- `NavLink` 不知道点击后该跳到哪里
- `Route` / `Routes` 不知道当前路径是什么
- `Navigate` 无法执行跳转

它们会直接报错。

> 💡 **想一想**：如果我们不用 `<BrowserRouter>`，还有哪些方式能让路由组件知道当前路径？（提示：URL 地址栏本身就是公开的，React Router 还提供了 `HashRouter` 和 `MemoryRouter`，它们分别适用于什么场景？）

---

## 关联笔记

- [[金山办公作业/Week06/登录安全流程]] - 用户认证与 JWT Token
- [[Outlet]] - 嵌套路由的出口 / 占位符