React 学习指南 - 第十五天 🚀

主题：React Router 入门与进阶（路由管理和动态路由）

在单页应用（SPA）开发中，前端路由管理是必不可少的。React Router 是 React 官方推荐的路由库，它可以让你的应用支持多页面导航，并能灵活处理动态路由、嵌套路由、重定向等。今天，我们来深入学习 React Router v6！

1. React Router 介绍

react-router-dom 是 React Router 专门为浏览器端开发的版本，它支持： ✅ 声明式路由：通过 Routes 和 Route 组件定义路由
✅ 动态路由匹配：支持 path/:id 形式的参数路由
✅ 嵌套路由：可以在页面内部定义子路由
✅ 导航管理：使用 useNavigate 进行编程式跳转

2. 安装 React Router

npm install react-router-dom
# 或者
yarn add react-router-dom

3. 基本路由

创建 App.js，设置基础路由：

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h2>首页</h2>;
}

function About() {
  return <h2>关于我们</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">首页</Link> | <Link to="/about">关于</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

✅ BrowserRouter 作为路由容器
✅ Link 组件代替 <a> 标签，避免刷新页面
✅ Routes 内部使用 Route 定义每个页面的路径和组件

4. 动态路由

有时，我们需要根据参数加载不同的内容，比如 /product/:id 这样不同 id 对应不同商品。

动态路由示例

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

function ProductDetail() {
  let { id } = useParams();
  return <h2>当前商品 ID：{id}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/product/1">商品 1</Link> | <Link to="/product/2">商品 2</Link>
      </nav>
      <Routes>
        <Route path="/product/:id" element={<ProductDetail />} />
      </Routes>
    </Router>
  );
}

✅ useParams() 用于获取 URL 参数，如 /product/1 中的 id=1
✅ 适用于详情页、用户页面等动态内容

5. 嵌套路由

有时候，我们希望在某个页面内再嵌套子页面，比如 /dashboard/settings，可以这样定义：

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

function Dashboard() {
  return (
    <div>
      <h2>控制面板</h2>
      <nav>
        <Link to="profile">个人资料</Link> | <Link to="settings">设置</Link>
      </nav>
      <Outlet /> {/* 渲染子路由组件 */}
    </div>
  );
}

function Profile() {
  return <h2>个人资料</h2>;
}

function Settings() {
  return <h2>设置</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
}

✅ Outlet 代表子路由的渲染位置
✅ dashboard/profile、dashboard/settings 都会在 Dashboard 组件内渲染

6. 路由跳转（useNavigate）

如果要在代码中跳转到其他页面，可以使用 useNavigate()：

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

function Home() {
  const navigate = useNavigate();

  return (
    <div>
      <h2>首页</h2>
      <button onClick={() => navigate("/about")}>跳转到关于</button>
    </div>
  );
}

✅ useNavigate() 类似 window.location.href，但不会刷新页面
✅ navigate(-1) 代表返回上一个页面，类似 window.history.back()

7. 重定向（Navigate 组件）

有时候，我们需要在用户访问某个页面时自动跳转到另一个页面，比如 login 后跳转 dashboard：

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

function Login() {
  const isAuthenticated = true; // 假设用户已经登录
  return isAuthenticated ? <Navigate to="/dashboard" /> : <h2>请登录</h2>;
}

✅ Navigate to="路径" 代表自动跳转

8. 404 页面（通配符 *）

当用户访问未定义的路由时，可以使用 * 进行匹配：

function NotFound() {
  return <h2>404 - 页面不存在</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

✅ path="*" 代表匹配所有未定义的路由

9. React Router 总结