当前位置：首页 > React

react如何实现路由拦截

2026-01-24 20:05:45React

路由拦截的实现方式

在React中实现路由拦截通常涉及在路由跳转前进行权限或条件检查，可以通过React Router提供的API或自定义逻辑完成。

使用`Navigate`组件重定向

通过useNavigate钩子和条件判断实现拦截，未满足条件时重定向到指定页面：

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

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

通过`useEffect`监听路由变化

在组件内监听路由变化并执行拦截逻辑：

import { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

function AuthChecker() {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    if (!isAllowedRoute(location.pathname)) {
      navigate('/forbidden', { replace: true });
    }
  }, [location]);
}

自定义高阶组件（HOC）

创建高阶组件包裹需要保护的路由组件：

function withAuth(Component) {
  return function WrappedComponent(props) {
    const isAuth = checkAuth();
    if (!isAuth) {
      return <Navigate to="/login" replace />;
    }
    return <Component {...props} />;
  };
}

// 使用方式
const ProtectedDashboard = withAuth(Dashboard);

路由配置中定义拦截器

在路由配置层进行全局拦截（React Router v6示例）：

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        path: 'profile',
        element: <AuthWrapper><Profile /></AuthWrapper>
      }
    ]
  }
]);

function AuthWrapper({ children }) {
  return localStorage.getItem('token') ? children : <Navigate to="/" />;
}

路由守卫模式

仿照传统路由守卫的实现方式：

function RouterGuard({ children }) {
  const [verified, setVerified] = useState(false);

  useEffect(() => {
    async function verify() {
      const isValid = await validateToken();
      setVerified(isValid);
    }
    verify();
  }, []);

  return verified ? children : <LoadingScreen />;
}