react如何实现路由拦截
路由拦截的实现方式
在React中实现路由拦截通常涉及在路由跳转前进行权限或条件检查，可以通过React Router提供的API或自定义逻辑完成。
使用Navigate组件重定向
通过useNavigate钩子和条件判断实现拦截，未满足条件时重定向到指定页面：
import { Navigate, useNavigate } from 'react-router-dom';
function PrivateRoute({ children }) {
const isAuthenticated = checkAuth(); // 自定义权限验证逻辑
return isAuthenticated ? children : <Navigate to="/login" replace />;
}通过useEffect监听路由变化
在组件内监听路由变化并执行拦截逻辑：
import { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
function AuthChecker() {
const navigate = useNavigate();
const location = useLocation();
useEffect(() => {
if (!isAllowedRoute(location.pathname)) {
navigate('/forbidden', { replace: true });
}
}, [location]);
}自定义高阶组件（HOC）
创建高阶组件包裹需要保护的路由组件：
function withAuth(Component) {
return function WrappedComponent(props) {
const isAuth = checkAuth();
if (!isAuth) {
return <Navigate to="/login" replace />;
}
return <Component {...props} />;
};
}
// 使用方式
const ProtectedDashboard = withAuth(Dashboard);路由配置中定义拦截器
在路由配置层进行全局拦截（React Router v6示例）：
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
children: [
{
path: 'profile',
element: <AuthWrapper><Profile /></AuthWrapper>
}
]
}
]);
function AuthWrapper({ children }) {
return localStorage.getItem('token') ? children : <Navigate to="/" />;
}路由守卫模式
仿照传统路由守卫的实现方式：
function RouterGuard({ children }) {
const [verified, setVerified] = useState(false);
useEffect(() => {
async function verify() {
const isValid = await validateToken();
setVerified(isValid);
}
verify();
}, []);
return verified ? children : <LoadingScreen />;
}注意事项
- 同步验证适合快速判断（如本地存储检查），异步验证需处理加载状态
- 使用
replace参数避免路由历史记录污染 - 敏感路由建议服务端二次校验
- 动态路由参数需在拦截逻辑中特殊处理
