react如何拦截路由
拦截路由的实现方法
在React中拦截路由通常用于权限控制、数据预加载或路由跳转前的确认操作。以下是几种常见方法：
使用React Router的导航守卫
React Router v6提供了useNavigate和useLocation钩子，结合useEffect可实现路由拦截：
import { useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';
function AuthCheck({ children }) {
const navigate = useNavigate();
const location = useLocation();
useEffect(() => {
const isLoggedIn = checkAuth(); // 自定义认证检查
if (!isLoggedIn && location.pathname !== '/login') {
navigate('/login', { state: { from: location } });
}
}, [location, navigate]);
return children;
}自定义路由组件
创建高阶组件包装路由，实现权限控制：
function PrivateRoute({ element, ...rest }) {
const auth = useAuth(); // 自定义认证钩子
return auth ? (
<Route {...rest} element={element} />
) : (
<Navigate to="/login" replace />
);
}
// 使用方式
<PrivateRoute path="/dashboard" element={<Dashboard />} />路由配置拦截
在路由配置中定义拦截逻辑：
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
loader: () => {
if (!authCheck()) throw new Response(null, { status: 401 });
return null;
},
errorElement: <ErrorPage />
}
]);全局路由监听
通过路由事件监听实现全局拦截：
const App = () => {
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
const unlisten = () => {
if (shouldBlockNavigation(location)) {
if (window.confirm('确定要离开当前页面？')) {
return true;
}
navigate(location.pathname, { replace: true });
return false;
}
};
return unlisten;
}, [location, navigate]);
};注意事项
- 异步验证需配合Suspense处理加载状态
- 重定向时考虑保留原路由状态（state）
- 服务端渲染场景需适配SSR方案
- 动态路由参数需在拦截逻辑中特殊处理
以上方法可根据具体场景组合使用，React Router v6推荐使用loader/action方案进行数据预检。
