当前位置：首页 > React

react如何进行路由拦截

2026-01-26 02:57:12React

React 路由拦截的实现方法

React 中实现路由拦截通常依赖路由库（如 React Router），通过高阶组件、自定义路由组件或导航守卫等方式控制访问权限。以下是几种常见方法：

使用高阶组件（HOC）包装路由

创建一个高阶组件，用于检查用户权限或登录状态，决定是否渲染目标组件或重定向到其他路由：

import { Redirect, Route } from 'react-router-dom';

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

// 使用示例
<PrivateRoute path="/dashboard" isAuthenticated={userLoggedIn} component={Dashboard} />

自定义 `<Route>` 组件

通过扩展 <Route> 组件，在 render 方法中添加拦截逻辑：

const AuthRoute = ({ path, condition, redirectPath, children }) => {
  return (
    <Route path={path}>
      {({ location }) => 
        condition ? (
          children
        ) : (
          <Redirect to={{ pathname: redirectPath, state: { from: location } }} />
        )
      }
    </Route>
  );
};

// 使用示例
<AuthRoute path="/admin" condition={isAdmin} redirectPath="/no-access">
  <AdminPage />
</AuthRoute>

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

React Router v6 推荐使用 <Navigate> 和 useNavigate 实现拦截：

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

const ProtectedRoute = ({ isAllowed, redirectPath = '/login' }) => {
  if (!isAllowed) {
    return <Navigate to={redirectPath} replace />;
  }
  return <Outlet />;
};

// 在路由配置中使用
<Route element={<ProtectedRoute isAllowed={isUserLoggedIn} />}>
  <Route path="/profile" element={<Profile />} />
</Route>

全局导航拦截

通过监听路由变化，在全局范围内统一处理拦截逻辑（适用于 React Router v5/v6）：

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

const useAuthGuard = (shouldBlock, redirectPath) => {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (shouldBlock(location)) {
      navigate(redirectPath, { replace: true, state: { from: location } });
    }
  }, [location]);
};

// 在组件中调用
useAuthGuard(
  (loc) => !userToken && loc.pathname.startsWith('/app'),
  '/auth'
);

结合 Context 或状态管理

将权限状态存储在全局上下文（如 Context API）或状态库（如 Redux），动态控制路由拦截：

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider value={{ user }}>
      {children}
    </AuthContext.Provider>
  );
};

// 在拦截组件中消费上下文
const { user } = useContext(AuthContext);
const isAdmin = user?.role === 'admin';