当前位置：首页 > React

react实现路由拦截

2026-01-27 07:42:14React

路由拦截的实现方法

在React中实现路由拦截通常通过高阶组件或自定义钩子完成，以下是几种常见方法：

使用React Router的`<Navigate>`组件

利用React Router v6的<Navigate>组件进行重定向，结合条件判断实现拦截逻辑：

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

const PrivateRoute = ({ children }) => {
  const isAuthenticated = checkAuth(); // 自定义认证逻辑
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
};

// 使用方式
<Route path="/dashboard" element={
  <PrivateRoute>
    <Dashboard />
  </PrivateRoute>
} />

自定义路由守卫组件

创建路由守卫组件封装拦截逻辑，适用于需要统一处理权限的场景：

const RouteGuard = ({ component: Component, ...rest }) => {
  const hasPermission = checkPermissions(rest.path);

  return hasPermission ? (
    <Component {...rest} />
  ) : (
    <div>无权限访问</div>
  );
};

// 路由配置
<Routes>
  <Route path="/admin" element={<RouteGuard component={AdminPage} />} />
</Routes>

使用路由配置拦截

在路由配置阶段预处理拦截逻辑，适用于静态路由配置：

const routes = [
  {
    path: '/profile',
    element: <Profile />,
    beforeEnter: () => {
      if (!isLoggedIn()) {
        return '/login';
      }
      return true;
    }
  }
];

const RouterWithInterceptor = () => {
  const element = useRoutes(routes.map(route => {
    if (route.beforeEnter) {
      const result = route.beforeEnter();
      if (result !== true) {
        return { ...route, element: <Navigate to={result} replace /> };
      }
    }
    return route;
  }));

  return element;
};

使用useEffect监听路由变化

在页面组件内通过useEffect监听路由变化实现拦截：

const ProtectedPage = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  return <div>受保护内容</div>;
};

权限验证高阶组件

创建高阶组件包装需要拦截的组件，实现复用：

const withAuth = (WrappedComponent) => {
  return (props) => {
    const [verified, setVerified] = useState(false);
    const navigate = useNavigate();

    useEffect(() => {
      const verify = async () => {
        const isValid = await verifyToken();
        if (!isValid) {
          navigate('/auth-error');
        }
        setVerified(true);
      };
      verify();
    }, [navigate]);

    return verified ? <WrappedComponent {...props} /> : <LoadingSpinner />;
  };
};

// 使用方式
const EnhancedComponent = withAuth(SensitiveComponent);