React Router v6实现路由拦截

import { useLocation } from 'react-router-dom';
 
// 定义一个用于路由拦截的自定义钩子
function useRoutingInterceptor() {
  const location = useLocation();
 
  // 实现业务逻辑，根据location判断是否需要拦截
  // 例如，拦截到/admin路由时
  if (location.pathname === '/admin') {
    // 执行拦截逻辑，例如跳转到登录页面或其他逻辑
    alert('您需要登录才能访问该页面！');
    // 这里可以使用history.push('/login')来重定向到登录页面
  }
}
 
// 在应用的入口文件或者路由配置的组件中使用该钩子
// 例如，在App组件中直接调用useRoutingInterceptor
function App() {
  useRoutingInterceptor();
 
  // 其他的路由配置和组件渲染代码
  return (
    <Routes>
      <Route path="/admin" element={<AdminPanel />} />
      {/* 其他路由配置 */}
    </Routes>
  );
}

这个例子展示了如何在React Router v6中使用自定义钩子来实现路由拦截。在实际应用中，拦截逻辑可能会更复杂，包括权限校验、用户状态检查等。在这个例子中，我们简单地在用户尝试访问/admin路由时弹出一个警告框作为拦截的示例。在实际应用中，你可能需要重定向用户到登录页面或者显示一个错误提示。