react路由实现路由拦截
路由拦截的实现方式
在React中实现路由拦截通常涉及以下几个关键步骤。以下是基于React Router v6的常见方法：
使用高阶组件（HOC）封装路由
创建一个高阶组件包裹需要拦截的路由，在组件内部进行权限或状态检查：
const ProtectedRoute = ({ children }) => {
const isAuthenticated = checkAuth(); // 自定义鉴权逻辑
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
return children;
};
// 使用方式
<Route path="/dashboard" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />自定义路由组件
创建自定义路由组件替代原生Route，集中处理拦截逻辑：
const PrivateRoute = ({ element: Component, ...rest }) => {
const auth = useAuth(); // 假设有全局认证hook
return auth ? <Component {...rest} /> : <Navigate to="/login" />;
};
// 路由配置
<Routes>
<Route path="/private" element={<PrivateRoute element={PrivatePage} />} />
</Routes>使用路由加载器（Router Loader）
React Router v6.4+支持加载器函数，可在加载阶段拦截：
const router = createBrowserRouter([
{
path: "/protected",
element: <ProtectedLayout />,
loader: async () => {
const user = await getUser();
if (!user) throw new Response("", { status: 401 });
return { user };
},
errorElement: <ErrorPage />
}
]);全局路由守卫
在根组件或路由配置外层添加全局监听：
function RouterGuard() {
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
if (requiresAuth(location.pathname) && !isLoggedIn()) {
navigate("/auth", { state: { from: location } });
}
}, [location]);
return <Outlet />;
}动态路由配置
根据权限状态动态生成路由配置：
function App() {
const routes = useMemo(() => {
const baseRoutes = [
{ path: "/", element: <Home /> }
];
return isAdmin()
? [...baseRoutes, { path: "/admin", element: <Admin /> }]
: baseRoutes;
}, [authState]);
return <Router><Routes>{routes}</Routes></Router>;
}关键注意事项
- 拦截逻辑应当考虑异步验证场景（如API鉴权）
- 被拦截时建议保留原始路由位置（state.from），便于登录后跳回
- 服务端渲染(SSR)场景需在服务端同步实现路由拦截
- 对于敏感路由建议同时添加服务端权限校验
以上方法可根据具体需求组合使用，React Router的灵活性允许开发者选择最适合项目架构的实现方式。
