react如何拦截路由
拦截路由的方法
在React中拦截路由通常用于实现权限控制、数据预加载或页面跳转前的确认操作。以下是几种常见的方法：
使用React Router的导航守卫
React Router v6提供了useNavigate和useLocation钩子，结合useEffect可以实现路由拦截效果：
import { useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';
function ProtectedRoute({ children }) {
const navigate = useNavigate();
const location = useLocation();
useEffect(() => {
const isAuthenticated = checkAuth(); // 自定义认证检查
if (!isAuthenticated) {
navigate('/login', { state: { from: location } });
}
}, [navigate, location]);
return children;
}自定义路由组件
创建一个高阶组件包裹需要保护的路由：
function PrivateRoute({ element }) {
const auth = useAuth(); // 自定义认证hook
return auth ? element : <Navigate to="/login" replace />;
}
// 使用方式
<Route path="/dashboard" element={<PrivateRoute element={<Dashboard />} />} />全局路由拦截
在根组件中添加全局路由监听：
function App() {
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
if (requiresAuth(location.pathname) && !isLoggedIn()) {
navigate('/login');
}
}, [location]);
}路由跳转前的确认
使用prompt组件实现离开页面前的确认提示（React Router v5）：
import { Prompt } from 'react-router-dom';
function EditPage() {
const [isBlocking, setIsBlocking] = useState(true);
return (
<>
<Prompt
when={isBlocking}
message="您有未保存的更改，确定要离开吗？"
/>
{/* 页面内容 */}
</>
);
}在React Router v6中需要通过自定义useBlocker实现类似功能。
动态路由加载
结合React.lazy和Suspense实现路由拦截式懒加载：
const Dashboard = React.lazy(() => import('./Dashboard'));
<Route
path="/dashboard"
element={
<Suspense fallback={<Loader />}>
<PrivateRoute>
<Dashboard />
</PrivateRoute>
</Suspense>
}
/>以上方法可以根据具体需求组合使用，实现灵活的路由拦截逻辑。对于复杂场景，可以考虑使用第三方库如react-router-guards或自定义路由配置中心化管理。
