React 学习指南 - 第十九天 🚀

主题：React Router 进阶（动态路由、嵌套路由、路由守卫）

在 React 中，react-router-dom 是最流行的路由管理库，它帮助我们在单页面应用（SPA）中实现页面切换。今天，我们将深入学习动态路由、嵌套路由、路由守卫等进阶内容，并通过代码示例展示如何实现这些功能。

1. 动态路由（Dynamic Routes）

动态路由允许我们在 URL 中使用参数，例如：

• /user/:id（匹配 /user/1、/user/2 等）

• /product/:category/:id（匹配 /product/electronics/123）

示例：用户详情页

首先，我们需要在 react-router-dom 中使用 useParams 钩子来获取 URL 参数。

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

function UserDetail() {
  let { id } = useParams(); // 获取 URL 参数

  return (
    <div>
      <h2>用户 ID: {id}</h2>
      <p>这里是用户 {id} 的详情页面。</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/user/1">用户 1</Link> | 
        <Link to="/user/2">用户 2</Link>
      </nav>

      <Routes>
        <Route path="/user/:id" element={<UserDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

✅ 动态参数 :id，useParams() 获取 URL 变量
✅ Link 组件实现导航
✅ 匹配 /user/1，则 id=1

2. 嵌套路由（Nested Routes）

嵌套路由用于在某个页面下再嵌套子页面，如：

• /dashboard → 仪表盘

• /dashboard/profile → 个人资料

• /dashboard/settings → 设置页面

示例：仪表盘

import { BrowserRouter as Router, Routes, Route, Link, Outlet } 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 <h3>个人资料页面</h3>;
}

function Settings() {
  return <h3>设置页面</h3>;
}

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

export default App;

✅ Outlet 组件用于渲染嵌套的子路由
✅ 访问 /dashboard/profile 加载 Profile 组件
✅ 结构清晰，适用于多级页面

3. 路由守卫（Route Guards）

在某些情况下，我们需要拦截未授权用户，例如：

• 未登录用户无法访问 /dashboard

• 只有管理员可以访问 /admin

示例：拦截未登录用户

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

// 模拟身份验证
const isAuthenticated = false; // 改为 true 试试？

function PrivateRoute({ element }) {
  return isAuthenticated ? element : <Navigate to="/login" />;
}

function Dashboard() {
  return <h2>欢迎来到仪表盘</h2>;
}

function Login() {
  return <h2>请先登录</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<PrivateRoute element={<Dashboard />} />} />
      </Routes>
    </Router>
  );
}

export default App;

✅ 如果 isAuthenticated=false，会跳转到 /login
✅ 用户登录后，才能访问 /dashboard
✅ <Navigate to="/login" /> 实现重定向

4. 懒加载路由（Code Splitting）

React 支持懒加载组件，可以减少首屏加载时间，提高性能。
使用 React.lazy 和 Suspense 实现：

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

const Dashboard = lazy(() => import("./Dashboard")); // 动态加载

function App() {
  return (
    <Router>
      <Suspense fallback={<h2>加载中...</h2>}>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

✅ 减少首屏加载时间
✅ 只有访问 /dashboard 时才会加载 Dashboard 组件
✅ Suspense 组件用于显示加载状态

5. 404 页面（未匹配路由）

如果用户访问了不存在的页面，我们可以使用 * 匹配所有未知路由，显示 404 页面。

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

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

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

export default App;

✅ * 匹配所有未知路由
✅ 用户访问 /random-page 直接跳转 404