当前位置：首页 > React

react如何实现路由拦截

2026-03-11 04:51:01React

路由拦截的实现方式

在React中实现路由拦截通常依赖于react-router-dom库，通过高阶组件、自定义路由组件或生命周期钩子来控制导航逻辑。以下是几种常见方法：

使用高阶组件封装路由

通过创建高阶组件（HOC）包裹需要拦截的路由组件，检查用户权限或登录状态：

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

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

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

自定义路由组件

创建继承自Route的自定义组件，重写渲染逻辑：

react如何实现路由拦截

class AuthRoute extends React.Component {
  render() {
    const { condition, redirectTo, ...routeProps } = this.props;
    return condition ? (
      <Route {...routeProps} />
    ) : (
      <Redirect to={redirectTo} />
    );
  }
}

// 使用示例
<AuthRoute 
  path="/admin" 
  condition={user.isAdmin} 
  redirectTo="/no-access" 
  component={AdminPanel}
/>

利用路由守卫（Navigation Guards）

通过useEffect或history.listen实现全局路由监听：

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

function RouterGuard() {
  const history = useHistory();
  const location = useLocation();

  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      if (!isAllowedRoute(location.pathname)) {
        history.replace('/forbidden');
      }
    });
    return () => unlisten();
  }, []);
}

动态路由配置

通过集中式路由配置实现权限过滤：

react如何实现路由拦截

const routes = [
  { path: '/public', component: PublicPage },
  { path: '/private', component: PrivatePage, requiresAuth: true }
];

function App() {
  return (
    <Switch>
      {routes.map((route) => (
        route.requiresAuth ? (
          <PrivateRoute key={route.path} {...route} />
        ) : (
          <Route key={route.path} {...route} />
        )
      ))}
    </Switch>
  );
}

结合Context进行状态管理

将路由拦截与全局状态（如Redux或Context API）结合：

const AuthContext = React.createContext();

function AuthProvider({ children }) {
  const [user] = useAuthState();

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

// 在路由组件中消费Context
function ProtectedRoute({ component: Component, ...props }) {
  const user = useContext(AuthContext);
  return (
    <Route
      {...props}
      render={() => user ? <Component /> : <Redirect to="/login" />}
    />
  );
}

处理异步权限校验

对于需要异步验证的场景（如API检查权限）：

function AsyncAuthRoute({ path, component: Component }) {
  const [authStatus, setAuthStatus] = useState(null);

  useEffect(() => {
    checkPermissions().then(isAllowed => {
      setAuthStatus(isAllowed);
    });
  }, []);

  if (authStatus === null) return <LoadingSpinner />;

  return authStatus ? (
    <Route path={path} component={Component} />
  ) : (
    <Redirect to="/denied" />
  );
}