当前位置：首页 > React

react实现beforeEach

2026-01-26 14:17:11React

React 实现类似路由守卫的 beforeEach 功能

在 React 中实现类似 Vue 路由守卫的 beforeEach 功能，可以通过 React Router 提供的导航守卫机制结合自定义逻辑完成。

使用 React Router v6 的导航守卫

React Router v6 提供了 useNavigate 和 useLocation 钩子，结合 useEffect 可以实现路由跳转前的拦截逻辑。

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

function RouterGuard({ children }) {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    // 在这里添加路由跳转前的逻辑
    const isAuthenticated = checkAuth(); // 自定义认证检查
    if (!isAuthenticated && location.pathname !== '/login') {
      navigate('/login', { replace: true });
    }
  }, [location, navigate]);

  return children;
}

自定义高阶组件封装

可以创建一个高阶组件来封装路由守卫逻辑，使代码更易于复用。

function withRouterGuard(WrappedComponent, guardFn) {
  return function(props) {
    const navigate = useNavigate();
    const location = useLocation();

    useEffect(() => {
      guardFn({ navigate, location });
    }, [location, navigate]);

    return <WrappedComponent {...props} />;
  };
}

在路由配置中应用守卫

可以在路由配置中为需要保护的路由添加守卫组件。

const routes = [
  {
    path: '/',
    element: (
      <RouterGuard>
        <HomePage />
      </RouterGuard>
    ),
  },
  {
    path: '/dashboard',
    element: (
      <RouterGuard>
        <Dashboard />
      </RouterGuard>
    ),
  },
];

实现完整的认证流程示例

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route
        path="/protected"
        element={
          <RequireAuth>
            <ProtectedPage />
          </RequireAuth>
        }
      />
    </Routes>
  );
}

function RequireAuth({ children }) {
  const auth = useAuth();
  const location = useLocation();

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

  return children;
}

处理异步验证逻辑

对于需要异步验证的场景，可以使用 Promise 或 async/await。

react实现beforeEach

useEffect(() => {
  const checkAccess = async () => {
    const hasAccess = await verifyUserAccess();
    if (!hasAccess) {
      navigate('/no-access');
    }
  };
  checkAccess();
}, [location, navigate]);

这些方法提供了在 React 中实现路由跳转前逻辑的各种方式，可以根据具体需求选择最适合的实现方案。