React 路由

封面图 • 2025-10-05 • React

React 路由（Routing）是用于在单页应用（SPA, Single Page Application）中实现页面导航的功能。它允许你在不重新加载整个页面的情况下，根据不同的 URL 显示不同的组件。

在 React 中，最常用的路由库是 **React Router**，它支持多种版本，目前主流的是 **React Router v6**。

---

## ✅ React Router 的基本概念

### 1. **`BrowserRouter`**
- 用于包裹整个应用，提供路由功能。
- 是基于 HTML5 的 `history` API 实现的。

```jsx
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 路由配置 */}
    </BrowserRouter>
  );
}
```

---

### 2. **`Routes` 和 `Route`**
- `Routes`：用于包裹多个 `Route` 组件。
- `Route`：定义路径和对应的组件。

```jsx
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}
```

---

### 3. **`Link` 组件**
- 用于创建导航链接，替代传统的 `<a>` 标签，防止页面刷新。

```jsx
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
        <li><Link to="/contact">联系</Link></li>
      </ul>
    </nav>
  );
}
```

---

### 4. **动态路由 / 嵌套路由**

#### 动态路由：
使用 `:id` 等参数捕获 URL 中的值。

```jsx
<Route path="/user/:id" element={<User />} />
```

在组件中获取参数：

```jsx
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>用户 ID: {id}</div>;
}
```

#### 嵌套路由：
使用 `Outlet` 组件来渲染子路由内容。

```jsx
<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<Dashboard />} />
  <Route path="profile" element={<Profile />} />
</Route>
```

在 `DashboardLayout` 中使用 `Outlet`：

```jsx
import { Outlet } from 'react-router-dom';

function DashboardLayout() {
  return (
    <div>
      <h1>仪表盘</h1>
      <Outlet /> {/* 子路由会在这里渲染 */}
    </div>
  );
}
```

---

## 📦 安装 React Router

如果你还没有安装 React Router，可以使用以下命令：

```bash
npm install react-router-dom
```

或者使用 yarn：

```bash
yarn add react-router-dom
```

---

## 🧠 小结

| 组件/函数 | 作用 |
|-----------|------|
| `BrowserRouter` | 提供路由功能 |
| `Routes` / `Route` | 定义路由规则 |
| `Link` | 创建导航链接 |
| `useParams` | 获取动态路由参数 |
| `Outlet` | 渲染嵌套路由内容 |

---

如果你想了解更高级的用法（如懒加载、权限控制、路由守卫等），也可以告诉我，我可以为你详细讲解！

需要我帮你写一个完整的 React + React Router 示例吗？