react路由导航守卫

### 实现 React 中的路由导航守卫 在 React 应用程序中，可以通过多种方式实现路由导航守卫。以下是基于 `react-router` 的几种常见实现方法。 #### 方法一：使用高阶组件（Higher-Order Component） 通过创建一个高阶组件来封装路由逻辑，可以轻松实现路由守卫功能。下面是一个典型的例子： ```javascript import React from 'react'; import { Route, Redirect } from 'react-router-dom'; const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => ( <Route {...rest} render={(props) => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location }, }} /> ) } /> ); export default PrivateRoute; ``` 上述代码定义了一个名为 `PrivateRoute` 的高阶组件[^2]。它接受两个主要参数：`component` 和 `isAuthenticated`。当用户未登录 (`isAuthenticated === false`) 时，会重定向到 `/login` 页面；否则允许访问目标页面。 --- #### 方法二：React Router v6 中的自定义守卫 随着 React Router 升级至版本 6，API 发生了一些变化。推荐的方式是利用 `useEffect` 或者自定义钩子函数配合路由渲染逻辑完成守卫操作。以下是一个示例： ```javascript // RoutingGuard.js import React from 'react'; import { Navigate, Outlet } from 'react-router-dom'; const RoutingGuard = ({ isAuthenticated }) => { if (!isAuthenticated) { return <Navigate to="/login" replace />; } return <Outlet />; }; export default RoutingGuard; // 使用场景 import React from 'react'; import { Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import Login from './pages/Login'; import Dashboard from './pages/Dashboard'; import RoutingGuard from './RoutingGuard'; function App() { const isAuthenticated = localStorage.getItem('token'); // 假设 token 存储于本地存储 return ( <Routes> <Route path="/" element={<Home />} /> <Route path="dashboard" element={ <RoutingGuard isAuthenticated={!!isAuthenticated}> <Dashboard /> </RoutingGuard> } /> <Route path="login" element={<Login />} /> </Routes> ); } export default App; ``` 在这个例子中，`RoutingGuard` 是一个简单的组件，用于判断当前用户的认证状态并决定是否继续加载受保护的内容[^3]。如果用户未经过身份验证，则会被自动重定向到登录页。 --- #### 方法三：动态跳转与导航控制 除了静态声明式的路由守卫外，还可以借助 `useNavigate` 钩子实现在特定事件触发下的动态跳转行为。例如，在表单提交成功后或者按钮点击时执行条件性的页面切换。 ```javascript import React from 'react'; import { useNavigate } from 'react-router-dom'; const UserLogin = () => { const navigate = useNavigate(); const handleLoginSuccess = () => { // 模拟异步请求完成后跳转 setTimeout(() => { navigate('/home'); }, 1000); }; return ( <div> <h1>Login Page</h1> <button onClick={handleLoginSuccess}>Log In</button> </div> ); }; export default UserLogin; ``` 此片段展示了如何手动调用 `navigate` 函数来进行页面间的转换[^5]。这种方式特别适合处理复杂的业务流程，比如支付确认后的订单详情展示等。 --- ### 总结 以上三种方案分别适用于不同需求层次的应用开发环境： 1. **高阶组件** 方便快速搭建基础版权限管理； 2. **v6 自定义守卫** 更加灵活且贴近现代框架设计理念； 3. **动态跳转机制** 则提供了额外的操作自由度以应对特殊交互需求。 无论采用哪种技术路径，核心思路始终围绕着拦截非法访问以及引导合法用户进入对应界面展开设计。