【react】实现路由返回拦截的多种方式

React路由拦截实现方案（React Router v5）

技术栈组合

# 核心依赖
react@17.x
react-dom@17.x
react-router-dom@5.3.4
history@4.10.1
antd@4.24.8 # 用于弹框组件

方式一：使用history.block实现

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Modal } from 'antd';function RouteGuard() {const history = useHistory();useEffect(() => {// 创建路由拦截器const unblock = history.block((tx) => {Modal.confirm({title: '离开确认',content: '有未保存的更改，确定要离开吗？',onOk: () => {unblock(); // 先解除拦截tx.retry(); // 重试跳转}});return false; // 阻止默认跳转});return () => unblock(); // 组件卸载时解除拦截}, [history]);return null;
}// 使用：在需要拦截的页面组件中引入

方式二：使用prompt结合message函数实现自定义弹框

import { Prompt } from 'react-router-dom';
import { Modal } from 'antd';let showModal = null;function CustomPrompt() {const [isBlocking, setIsBlocking] = useState(false);return (<><Promptwhen={isBlocking}message={(location) => {Modal.confirm({title: '路由拦截',content: `即将跳转到 ${location.pathname}`,onOk: () => setIsBlocking(false),onCancel: () => setIsBlocking(true)});return false; // 必须返回布尔值}}/></>);
}

方式三：自定义全局拦截器

基于prompt，修改路由getUserConfirmation实现自定义弹框拦截

// 入口文件index.js
import { BrowserRouter } from 'react-router-dom';
import { Modal } from 'antd';<BrowserRoutergetUserConfirmation={(message, callback) => {Modal.confirm({title: '系统提示',content: message,onOk: () => callback(true),onCancel: () => callback(false)});}}
><App />
</BrowserRouter>// 页面组件中使用
import { Prompt } from 'react-router-dom';function EditPage() {return (<Promptwhen={true}message="当前页面有未保存内容，确定离开？"/>);
}

方式四：动态路由控制

// 路由配置
const dynamicRoutes = [{path: '/dashboard',component: Dashboard,auth: true},{path: '/login',component: Login}
];// 路由守卫组件
function AuthRoute({ component: Component, ...rest }) {const isLogin = !!localStorage.getItem('token');return (<Route{...rest}render={(props) =>isLogin ? (<Component {...props} />) : (<Redirectto={{ pathname: '/login', state: { from: props.location } }}/>)}/>);
}// 动态路由渲染
function AppRouter() {return (<Switch>{dynamicRoutes.map((route) => (route.auth ? (<AuthRoute key={route.path} {...route} />) : (<Route key={route.path} {...route} />)))}</Switch>);
}

方案对比

方案	优势	适用场景	注意事项
方案一	细粒度控制，支持复杂交互逻辑	需要动态解除拦截的场景	需手动管理拦截器生命周期
方案二	组件化集成，简单快捷	简单弹窗确认场景	需要处理状态同步问题
方案三	全局统一拦截策略，架构清晰	需要统一拦截样式的项目	需在入口文件配置
方案四	完善的权限路由体系	需要动态路由控制的企业级应用	需维护路由配置元数据

最佳实践建议

混合使用策略：在大型项目中组合使用方案三（全局拦截）和方案四（权限路由）

性能优化：对于需要频繁拦截的页面，优先使用方案一（细粒度控制）

状态管理：建议配合Redux/Zustand管理路由拦截状态

异常处理：所有路由跳转需添加错误边界处理

TypeScript支持：推荐使用类型化的路由配置：

interface RouteConfig {path: string;component: React.ComponentType;auth?: boolean;children?: RouteConfig[];
}

扩展能力

埋点拦截：在路由守卫中添加用户行为追踪

history.listen((location) => {trackPageView(location.pathname);
});

页面缓存：结合<KeepAlive>实现路由级缓存

动态加载：配合React.lazy实现按需加载

const Dashboard = React.lazy(() => import('./Dashboard'));

多级路由守卫：实现全局守卫+页面级守卫的多层校验体系

通过合理选择路由拦截方案，开发者可以在保证用户体验的同时，构建出安全可靠的前端路由系统。建议根据项目规模选择基础方案（中小项目用方案三）或组合方案（大型项目用方案三+四）

以上主要是用react router v5的方案

以下是react router v6

React路由拦截实现方案（React Router v5）

一、React Router v6适配要点

API变更说明：

// v5 -> v6 核心变化
- <Switch> → <Routes>
- <Redirect> → <Navigate>
- useHistory → useNavigate
- withRouter移除，推荐使用Hooks

v6拦截方案示例：

// 权限路由组件（v6版本）
const ProtectedRoute = ({ children }) => {const { user } = useAuth();const location = useLocation();return user ? children : (<Navigate to="/login" state={{ from: location }} replace />);
};// 路由配置
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>
} />

二、React Router v6数据加载API

Loader拦截示例：

// 路由定义
const router = createBrowserRouter([{path: "/dashboard",element: <Dashboard />,loader: async () => {const data = await fetchUserData();if (!data.valid) throw new Response("Unauthorized", { status: 401 });return data;},errorElement: <ErrorPage />}
]);// 统一错误处理
<RouterProvider router={router} />

三、v6版本Prompt替代方案

自定义拦截逻辑：

import { unstable_useBlocker as useBlocker } from 'react-router-dom';const NavigationBlock = ({ when }) => {useBlocker((tx) => {if (when && !window.confirm('确定离开当前页面？')) {tx.retry();}});return null;
};// 使用
<NavigationBlock when={formIsDirty} />

四、状态管理深度集成

Zustand集成示例：

// store/authStore.js
import create from 'zustand';const useAuthStore = create(set => ({token: null,login: (token) => set({ token }),logout: () => set({ token: null })
}));// 路由组件
const AuthRoute = ({ children }) => {const token = useAuthStore(state => state.token);return token ? children : <Navigate to="/login" />;
};

五、增强型错误处理

异步操作拦截策略：

const SaveBeforeLeave = () => {const blocker = useBlocker(({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname);useEffect(() => {if (blocker.state === "blocked") {(async () => {try {await autoSave();blocker.proceed();} catch (error) {blocker.reset();}})();}}, [blocker]);
};

六、测试策略

Jest测试示例：

test('拦截未授权访问', async () => {const TestComponent = () => {const nav = useNavigate();useEffect(() => { nav('/protected') }, []);return null;};render(<MemoryRouter><Routes><Route path="/protected" element={<ProtectedRoute><div>Protected</div></ProtectedRoute>} /><Route path="/login" element={<div>Login</div>} /></Routes><TestComponent /></MemoryRouter>);await waitFor(() => expect(screen.getByText('Login')).toBeInTheDocument());
});

七、TypeScript增强

完整类型定义：

interface RouteMeta {requiresAuth?: boolean;permissions?: string[];
}declare module 'react-router-dom' {interface RouteObject {meta?: RouteMeta;children?: RouteObject[];}
}const routes: RouteObject[] = [{path: '/admin',element: <AdminPage />,meta: {requiresAuth: true,permissions: ['ADMIN']}}
];

八、安全增强措施

路由参数验证：

const ProductRoute = () => {const { id } = useParams();const isValid = /^\d+$/.test(id);return isValid ? <ProductPage /> : (<Navigate to="/404" replace />);
};

升级路线图

版本	核心方案	升级建议
v5	Prompt + 高阶组件	逐步替换为v6方案
v6.0-6.3	useBlocker实验性API	配合状态管理实现
v6.4+	数据路由 + Loader拦截	推荐作为新项目首选方案

性能优化补充

代码分割：

const Dashboard = lazy(() => import('./Dashboard'));
<Route path="/dashboard" element={<Suspense fallback={<Spinner />}><ProtectedRoute><Dashboard /></ProtectedRoute></Suspense>
} />

缓存策略：

const CachedRoute = ({ children }) => {const elementRef = useRef(children);return <div hidden={!isVisible}>{elementRef.current}</div>;
};

移动端专项优化

手势拦截：

useEffect(() => {const preventBack = (e) => {e.preventDefault();showConfirmModal();};history.pushState(null, '', window.location.pathname);window.addEventListener('popstate', preventBack);return () => window.removeEventListener('popstate', preventBack);
}, []);

离线处理：

const NetworkAwareRoute = ({ children }) => {const [online] = useNetworkStatus();return online ? children : <OfflinePage />;
};

通过以上补充，路由拦截系统将具备：

版本兼容性：完整覆盖v5/v6双版本方案
类型安全：强化TypeScript类型支持
异常韧性：增强错误边界和异步处理
性能保障：代码分割与缓存策略优化
安全防护：参数验证与网络感知能力
测试覆盖：可验证的关键路径测试方

码字不易，大佬们点点赞呗