本教程详细介绍了如何在 React.JS 应用中，利用 React router v6 实现嵌套路由和保护路由。文章将引导您配置一个带有侧边导航的仪表盘布局，确保用户登录后才能访问特定页面，并通过 Outlet 组件在主内容区域动态渲染子路由内容，解决多组件同时渲染的问题，提升用户体验和应用结构清晰度。
理解嵌套路由与保护路由的需求
在现代 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 ( <div className="App"> <Routes> {/* 登录页 */} <Route path="/" element={<SignIn />} /> {/* 保护路由：所有仪表盘相关页面都应在 ProtectedRoute 内部 */} <Route element={<ProtectedRoute />}> {/* 仪表盘布局路由：它将包含嵌套路由 */} <Route path="/dashboard" element={<Layout />}> {/* 仪表盘的默认内容，当访问 /dashboard 时显示 */} <Route index element={<WelcomeDashboard />} /> {/* 嵌套在 /dashboard 下的用户管理页面 */} <Route path="users" element={<Users />} /> {/* 嵌套在 /dashboard 下的产品管理页面 */} <Route path="products" element={<Products />} /> </Route> </Route> {/* 404 页面或重定向到首页 */} <Route path="*" element={<Navigate to="/" replace />} /> </Routes> </div> ); } 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 ( <div className="dashboard-layout"> <Row> {/* 左侧菜单栏 */} <Col xxl={4} xl={5} lg={6} md={6} sm={6} xs={6}> <div className="left-menu"> <ul> <li> {/* 使用相对路径导航到 /dashboard/users */} <Link to="users">Users</Link> </li> <li> {/* 使用相对路径导航到 /dashboard/products */} <Link to="products">Products</Link> </li> <li> {/* 返回仪表盘首页，使用相对路径导航到 /dashboard */} <Link to="/dashboard">Dashboard Home</Link> </li> </ul> </div> </Col> {/* 右侧主内容区域，由 Outlet 渲染子路由内容 */} <Col xxl={20} xl={19} lg={18} md={18} sm={18} xs={18}> <div className="main-content"> <Outlet /> {/* 核心：子路由组件将在这里渲染 */} </div> </Col> </Row> </div> ); }; 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 <Navigate to="/" replace />; } // 如果已登录，渲染子路由（即 App.jsx 中 ProtectedRoute 下的 Route 元素） return <Outlet />; }; export default ProtectedRoute;
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 ( <div style={{ padding: '20px', textAlign: 'center' }}> <h2>登录</h2> <input type="text" placeholder="邮箱" style={{ margin: '5px', padding: '8px' }} /> <br /> <input type="password" placeholder="密码" style={{ margin: '5px', padding: '8px' }} /> <br /> <button onClick={handleLogin} style={{ margin: '10px', padding: '10px 20px', cursor: 'pointer' }}> 登录 </button> </div> ); }; export default SignIn;
5. 内容组件 (Users.jsx, Products.jsx, WelcomeDashboard.jsx)
这些是仪表盘内部显示的具体内容组件。
// components/Users.jsx import React from 'react'; const Users = () => { return ( <div style={{ padding: '20px' }}> <h3>用户管理页面</h3> <p>这里显示用户列表和相关操作。</p> </div> ); }; export default Users; // components/Products.jsx import React from 'react'; const Products = () => { return ( <div style={{ padding: '20px' }}> <h3>产品管理页面</h3> <p>这里显示产品列表和相关操作。</p> </div> ); }; export default Products; // components/WelcomeDashboard.jsx import React from 'react'; const WelcomeDashboard = () => { return ( <div style={{ padding: '20px' }}> <h3>欢迎来到仪表盘！</h3> <p>请从左侧菜单选择一个选项。</p> </div> ); }; 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 单页应用的关键。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
