理解嵌套路由与保护路由的需求
在现代 web 应用中，尤其是仪表盘或管理后台，经常需要实现以下功能：
- 用户认证保护： 某些页面（如仪表盘内部页面）只能由已登录的用户访问。
- 统一布局： 登录后的页面通常共享一个通用布局（例如，包含顶部导航、侧边栏和主内容区域）。
- 嵌套内容渲染： 当用户点击侧边栏菜单项时，只有主内容区域发生变化，而侧边栏和顶部导航保持不变。
传统的路由配置可能导致当用户点击侧边栏链接时，整个页面被替换，或者多个组件同时渲染，无法达到预期的单区域内容更新效果。React Router v6 通过引入 Outlet 组件和更灵活的路由配置方式，优雅地解决了这些问题。
核心概念解析
在深入代码之前，我们先了解几个关键概念：
- Outlet 组件： 这是 React Router v6 中实现嵌套路由的核心。它是一个占位符，用于渲染当前匹配的子路由元素。当父路由被激活时，其内部的 Outlet 会根据 URL 匹配到的子路由来渲染相应的组件。
- ProtectedRoute (保护路由)： 这是一个自定义组件，用于包裹需要认证才能访问的路由。它会检查用户的登录状态，如果未登录则重定向到登录页，否则渲染其内部的 Outlet 或子组件。
- 相对路径与绝对路径： 在 Link 组件或 Route 定义中，路径可以是绝对路径（以 / 开头）或相对路径（不以 / 开头）。在嵌套路由中，使用相对路径可以更灵活地管理子路由，使其与父路由路径关联。
实现步骤与代码示例
我们将构建一个简单的应用，包含登录页、一个受保护的仪表盘布局，以及仪表盘内部的“用户管理”和“产品管理”页面。
1. 路由配置 (App.jsx)
在 App.jsx 中，我们配置主要的路由结构。注意 ProtectedRoute 如何包裹需要保护的路由，以及 Layout 如何作为嵌套路由的父级。
// App.jsx
import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import SignIn from './components/SignIn';
import Layout from './components/Layout';
import Users from './components/Users';
import Products from './components/Products';
import WelcomeDashboard from './components/WelcomeDashboard'; // 仪表盘默认内容
import ProtectedRoute from './components/ProtectedRoute'; // 保护路由组件
function App() {
return (
{/* 登录页 */}
);
}
export default App;2. 布局组件 (Layout.jsx)
Layout 组件是仪表盘的骨架，它包含侧边栏导航和主内容区域。Outlet 组件就放置在主内容区域，用于渲染匹配到的子路由内容。
// components/Layout.jsx
import React from "react";
import { Col, Row } from "antd"; // 假设使用 Ant Design 进行布局
import { Link, Outlet } from "react-router-dom"; // 引入 Outlet
const Layout = () => {
return (
{/* 左侧菜单栏 */}
-
{/* 使用相对路径导航到 /dashboard/users */}
Users
-
{/* 使用相对路径导航到 /dashboard/products */}
Products
-
{/* 返回仪表盘首页，使用相对路径导航到 /dashboard */}
Dashboard Home
{/* 右侧主内容区域，由 Outlet 渲染子路由内容 */}
);
};
export default Layout;3. 保护路由组件 (ProtectedRoute.jsx)
ProtectedRoute 组件负责检查用户是否已登录。这里我们用一个简单的 localStorage 模拟登录状态。在实际应用中，您会使用更复杂的认证管理系统（如 Context API、Redux 或第三方库）。
// components/ProtectedRoute.jsx
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
const ProtectedRoute = () => {
// 模拟登录状态，实际应用中会从全局状态或认证服务获取
const isAuthenticated = localStorage.getItem('isLoggedIn') === 'true';
if (!isAuthenticated) {
// 如果未登录，重定向到登录页
return 4. 登录页面 (SignIn.jsx)
登录页面在用户点击登录按钮后，会设置一个模拟的登录状态，并重定向到 /dashboard。
// components/SignIn.jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';
const SignIn = () => {
const navigate = useNavigate();
const handleLogin = () => {
// 模拟登录成功，设置登录状态
localStorage.setItem('isLoggedIn', 'true');
// 导航到仪表盘页面
navigate('/dashboard');
};
return (
登录
);
};
export default SignIn;5. 内容组件 (Users.jsx, Products.jsx, WelcomeDashboard.jsx)
这些是仪表盘内部显示的具体内容组件。
// components/Users.jsx
import React from 'react';
const Users = () => {
return (
用户管理页面
这里显示用户列表和相关操作。
);
};
export default Users;
// components/Products.jsx
import React from 'react';
const Products = () => {
return (
产品管理页面
这里显示产品列表和相关操作。
);
};
export default Products;
// components/WelcomeDashboard.jsx
import React from 'react';
const WelcomeDashboard = () => {
return (
欢迎来到仪表盘！
请从左侧菜单选择一个选项。
);
};
export default WelcomeDashboard;注意事项
- 认证状态管理： 上述示例使用 localStorage 模拟认证状态，这在生产环境中是不安全的。实际应用中，您应该使用 JWT (JSON Web Tokens)、Session 或 OAuth 等更安全的认证机制，并通过 Context API、Redux、Zustand 或 React Query 等状态管理库来管理用户的认证状态。
-
index 路由： 在 App.jsx 中，Layout 路由下的
} /> 表示当 URL 精确匹配到 /dashboard 时，WelcomeDashboard 组件将被渲染到 Layout 的 Outlet 中。这是一个很好的实践，为父路由提供默认内容。 - Navigate 组件： 当需要进行程序化导航或重定向时，Navigate 组件非常有用。在 ProtectedRoute 中，它用于在用户未登录时立即重定向。replace 属性可以防止在历史记录中留下重定向前的条目。
- 样式与布局： 示例中使用了 Ant Design 的 Row 和 Col 组件进行简单的布局，但您可以根据项目需求使用任何 CSS 框架或自定义样式。关键在于 Outlet 放置的位置。
-
错误处理 (404)： App.jsx 中的
} /> 是一个通配符路由，用于捕获所有未匹配的 URL，并将其重定向到首页。您可以将其替换为专门的 404 页面。
总结
通过 React Router v6 的 Outlet 组件和灵活的路由配置，我们可以轻松实现复杂的嵌套路由结构，并结合自定义的 ProtectedRoute 来保护敏感页面。这种模式不仅使得代码结构更加清晰，也大大提升了用户体验，确保了应用的安全性和可维护性。理解并熟练运用这些概念，是构建健壮 React 单页应用的关键。
