当前位置：首页 > React

react里如何做路由拦截

2026-01-26 02:58:57React

路由拦截的实现方法

在React中实现路由拦截通常涉及以下两种主流方案，适用于不同场景需求：

使用React Router的导航守卫

React Router v6+版本推荐采用<Navigate>组件和useNavigate钩子实现拦截逻辑：

import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth(); // 自定义认证逻辑
  return isAuthenticated ? children : <Navigate to="/login" replace />;
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<PublicPage />} />
      <Route
        path="/dashboard"
        element={
          <PrivateRoute>
            <Dashboard />
          </PrivateRoute>
        }
      />
    </Routes>
  );
}

全局路由跳转拦截可通过监听路由变化实现：

const navigate = useNavigate();
useEffect(() => {
  const unlisten = navigate((location) => {
    if (!allowNavigation(location)) return false;
  });
  return () => unlisten();
}, []);

高阶组件封装方案

通过高阶组件包装需要保护的页面组件：

function withAuth(Component) {
  return (props) => {
    const [verified, setVerified] = useState(false);

    useEffect(() => {
      async function verify() {
        const isValid = await checkToken();
        if (!isValid) redirectToLogin();
        setVerified(true);
      }
      verify();
    }, []);

    return verified ? <Component {...props} /> : <LoadingIndicator />;
  };
}

// 使用方式
const ProtectedPage = withAuth(PageComponent);

路由配置拦截

通过集中式路由配置实现统一管理：

const routes = [
  { path: '/', element: <Home /> },
  { 
    path: '/admin', 
    element: <Admin />,
    middleware: [authGuard, adminCheck] 
  }
];

function applyMiddlewares(route) {
  if (!route.middleware) return route.element;
  return route.middleware.reduce((acc, guard) => guard(acc), route.element);
}

动态路由加载拦截

结合懒加载实现权限过滤：

const router = createBrowserRouter([
  {
    path: '/',
    async loader() {
      const user = await getUser();
      if (!user) throw new Response(null, { status: 401 });
      return { user };
    },
    children: [
      { path: 'profile', element: <Profile /> }
    ]
  }
]);