React 学习指南 - 第二十三天 🚀

主题：React Router 深度进阶 + 路由守卫 & 动态菜单实战

今天我们搞定 React Router 的高级用法，顺便写一个企业级常用的 “前端路由守卫 + 动态菜单” 案例，稳了！

1. React Router 嵌套路由

基本概念

在一个大型项目中，页面通常存在多层嵌套（如后台管理系统），React Router 通过 <Outlet /> 支持嵌套路由。

示例

// App.jsx
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="analytics">Analytics</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Analytics() {
  return <h3>Analytics Page</h3>;
}

function Settings() {
  return <h3>Settings Page</h3>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<h1>Home</h1>} />
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="analytics" element={<Analytics />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

✅ 子路由自动渲染到 <Outlet />
✅ 结构更清晰，适合后台系统、多级路由场景

2. 动态路由

动态路由 = 带参数的 URL。

示例

<Route path="/product/:id" element={<Product />} />

function Product() {
  const { id } = useParams();
  return <h3>商品 ID: {id}</h3>;
}

实际用途

• 商品详情页 /product/123

• 用户中心 /user/888

3. 路由懒加载

提升首屏速度，推荐 React.lazy + Suspense

const Settings = lazy(() => import("./pages/Settings"));

<Route
  path="/settings"
  element={
    <Suspense fallback={<p>加载中...</p>}>
      <Settings />
    </Suspense>
  }
/>

4. 路由守卫（Auth Guard）

前端控制用户访问权限，未登录用户禁止访问部分页面。

实现 AuthGuard 组件

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

export function AuthGuard({ children }) {
  const isLoggedIn = !!localStorage.getItem("token");
  const location = useLocation();

  if (!isLoggedIn) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

守卫路由

<Route
  path="/dashboard"
  element={
    <AuthGuard>
      <Dashboard />
    </AuthGuard>
  }
/>

✅ 没登录 → 自动跳转 /login
✅ 登录后 → 正常访问受保护路由

5. 动态菜单 + 权限控制

思路

后端返回权限菜单，根据权限动态生成 <Link>。

模拟权限数据

const userPermissions = [
  { path: "/dashboard", label: "仪表盘" },
  { path: "/dashboard/analytics", label: "数据分析" },
];

动态渲染菜单

function Menu() {
  return (
    <nav>
      {userPermissions.map((item) => (
        <Link key={item.path} to={item.path}>{item.label}</Link>
      ))}
    </nav>
  );
}

✅ 根据权限列表动态生成侧边栏
✅ 用户看到的菜单是定制化的

6. 实战小案例完整结构

bash复制编辑App.jsx
 ├── /login
 ├── /dashboard
       ├── /analytics
       ├── /settings

• /dashboard/* 路由有 Auth 守卫保护

• 登录后动态生成菜单

• 根据用户权限决定能否访问子路由

7. 项目实用建议

• 项目中可以用 React Context 存储用户信息 & 权限数据

• 大项目建议配合 axios 拦截器 + React Router，实现登录态 + token 校验

8. 明天预告

🔥 第二十四天：前端状态管理对比（Context、Redux、Zustand、Recoil）
我会直接给你一套企业级 React 状态管理方案，顺手安排 Zustand + React-Query 的组合，真的香！

需要我一起带上 “Zustand 权限管理 + React-Query 数据请求整合” 吗？ ✨

具体升级 请看地二十四天