本文档旨在指导开发者如何在 React.js 应用中有效地管理嵌套路由，并结合私有路由实现用户认证后的页面访问控制。我们将通过示例代码，演示如何构建一个包含登录页面、受保护的仪表盘页面以及仪表盘内部的嵌套路由的完整流程。
实现嵌套路由和私有路由
在 React.js 应用中，嵌套路由允许你在一个布局组件内部渲染不同的子组件，而私有路由则用于控制哪些用户可以访问特定的路由。以下是一个实现嵌套路由和私有路由的示例：
1. App.jsx (主应用组件)
import React from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import SignIn from "./auth/SignIn";
import Layout from "./components/Layout";
import Users from "./components/Users";
import Products from "./components/Products";
import ProtectedRoute from "./auth/ProtectedRoute";
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<SignIn />} />
<Route path="/" element={<ProtectedRoute />}>
<Route path="/layout" element={<Layout />} />
<Route path="/user" element={<Users />} />
<Route path="/products" element={<Products />} />
</Route>
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</div>
);
}
export default App;在这个 App 组件中，我们使用了 react-router-dom 提供的 Routes 和 Route 组件来定义路由。
- / 路由对应 SignIn 组件，也就是登录页面。
- /layout、/user 和 /products 路由被包裹在 ProtectedRoute 组件中，这意味着只有通过认证的用户才能访问这些路由。
- ProtectedRoute 组件实际上是一个私有路由的实现，它会检查用户是否已登录，如果未登录则重定向到登录页面。
- * 路由是一个通配符路由，用于处理所有未定义的路由，并将其重定向到登录页面。
2. Layout.jsx (布局组件)
import React from "react";
import { Col, Row } from "antd";
import { Link, Outlet } from "react-router-dom";
const Layout = () => {
return (
<>
<Row>
<Col xxl={4} xl={5} lg={6} md={6} sm={6} xs={6}>
<div className="left-menu">
<ul>
<li>
<Link to="/user">Users</Link>
</li>
<li>
<Link to="/products">Products</Link>
</li>
</ul>
</div>
</Col>
<Col xxl={20} xl={19} lg={18} md={18} sm={18} xs={18}>
<Outlet />
</Col>
</Row>
</>
);
};
export default Layout;Layout 组件定义了应用的整体布局，包括左侧菜单和内容区域。重要的是
3. SignIn.jsx (登录组件)
YothCMS是由 石家庄优斯科技有限公司开发的一套完全开源建站系统，主要面向企业进行快速的建造简洁，高效，易用，安全的公司企业网门户站，稍具技术的开发人员就能够使用本系统以最低的成本、最少的人力投入在最短的时间内架设一个功能齐全、性能优越的公司企业网站。YothCMS是基于ASP+Access开发的一款轻巧高效的网站内容管理系统，提供了新闻管理模块，产品管理模块，文件管理模块。在使用过程中可以轻
import React from "react";
import { useNavigate } from "react-router-dom";
const SignIn = () => {
const navigate = useNavigate();
const loginAuth = () => {
// TODO: 实际项目中需要验证登录信息
// 这里只是简单地模拟登录成功，并跳转到 layout 页面
localStorage.setItem("isLoggedIn", "true"); // 模拟登录状态
navigate("/layout");
};
return (
<>
<h2>Sign In</h2>
<input type="text" placeholder="email" />
<input type="password" placeholder="password" />
<button onClick={loginAuth}>Login</button>
</>
);
};
export default SignIn;SignIn 组件是一个简单的登录表单。当用户点击 "Login" 按钮时，loginAuth 函数会被调用。
- useNavigate 钩子用于获取 navigate 函数，该函数用于编程式地导航到不同的路由。
- loginAuth 函数模拟了登录过程。注意： 在实际项目中，你需要验证用户的登录信息，并根据验证结果来决定是否跳转到仪表盘页面。这里简单地使用 localStorage 模拟登录状态，实际项目中请替换为更安全的方案（例如使用 JWT）。
4. ProtectedRoute.jsx (私有路由组件)
import React from "react";
import { Navigate, Outlet } from "react-router-dom";
const ProtectedRoute = () => {
const isLoggedIn = localStorage.getItem("isLoggedIn"); // 检查用户是否已登录
return isLoggedIn ? <Outlet /> : <Navigate to="/" />;
};
export default ProtectedRoute;ProtectedRoute 组件是私有路由的核心。
- 它检查用户是否已登录（这里通过 localStorage 模拟）。
- 如果用户已登录，则渲染
，这意味着允许用户访问嵌套的路由。 - 如果用户未登录，则重定向到登录页面。
5. Users.jsx 和 Products.jsx (示例组件)
// Users.jsx
import React from "react";
const Users = () => {
return (
<div>
<h2>Users Component</h2>
{/* 用户列表内容 */}
</div>
);
};
export default Users;
// Products.jsx
import React from "react";
const Products = () => {
return (
<div>
<h2>Products Component</h2>
{/* 产品列表内容 */}
</div>
);
};
export default Products;这两个组件是简单的示例组件，用于展示嵌套路由的效果。当用户访问 /user 路由时，Users 组件将被渲染；当用户访问 /products 路由时，Products 组件将被渲染。
注意事项
- 安全性： 使用 localStorage 存储登录状态是不安全的，应该使用更安全的方案，例如 JWT (JSON Web Token)。
- 状态管理： 对于更复杂的应用，可以考虑使用 Redux、Context API 等状态管理工具来管理用户认证状态。
- 路由配置： 确保路由配置正确，避免出现路由冲突或无法访问的情况。
- 用户体验： 在用户未登录时，可以显示一个友好的提示信息，引导用户登录。
总结
通过上述步骤，你可以在 React.js 应用中实现嵌套路由和私有路由。这种方式可以有效地管理应用的路由结构，并控制用户对不同页面的访问权限。记住，安全性是至关重要的，应该选择合适的认证方案来保护你的应用。
