React Router如何预检查变量（如会话变量）并在缺失时强制跳转？

当然支持啦！React Router有好几种实用的方案来解决你说的这种路由权限校验问题，正好能搞定登出后用户通过浏览器返回按钮偷偷访问受限页面的情况～

1. 自定义权限校验高阶组件（HOC）—— 路由守卫 #

这是最常用也最优雅的方式，你可以封装一个RequireAuth组件，把所有需要登录才能访问的路由都套在它里面。它会在路由渲染前自动检查会话变量（比如用户登录状态），如果用户已经登出，就直接重定向到登录页，还能处理浏览器历史记录的问题。

给你个实际代码例子参考：

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

const RequireAuth = () => {
  // 这里换成你实际的会话检查逻辑，比如从localStorage或全局状态取
  const isLoggedIn = !!localStorage.getItem('userSession');

  // 如果未登录，用replace属性重定向，这样会替换掉历史记录里的受限路由
  // 用户点击返回时就不会再回到这个页面了
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }

  // 已登录就正常渲染对应的路由内容
  return <Outlet />;
};

// 路由配置里这么用
function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      {/* 所有需要权限的路由都嵌套在RequireAuth下 */}
      <Route element={<RequireAuth />}>
        <Route path="/dashboard" element={<DashboardPage />} />
        <Route path="/profile" element={<ProfilePage />} />
      </Route>
    </Routes>
  );
}

2. 单个组件内的挂载校验 #

如果只是某个特定组件需要做权限检查，也可以在组件挂载时用useEffect结合useNavigate来处理：

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

function DashboardPage() {
  const navigate = useNavigate();

  useEffect(() => {
    const isLoggedIn = !!localStorage.getItem('userSession');
    if (!isLoggedIn) {
      // 同样用replace来处理历史记录
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  return <div>欢迎来到仪表盘！</div>;
}

3. 全局路由监听（React Router v6+） #

如果你想在全局层面拦截所有路由切换（包括浏览器前进后退触发的），可以用useNavigation钩子监听路由状态变化，每次路由开始加载时都做权限校验：

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

function App() {
  const navigation = useNavigation();
  const navigate = useNavigate();

  useEffect(() => {
    // 当路由处于加载状态时触发校验
    if (navigation.state === 'loading') {
      const isLoggedIn = !!localStorage.getItem('userSession');
      // 定义需要权限的路由列表
      const protectedRoutes = ['/dashboard', '/profile'];
      const currentPath = window.location.pathname;

      // 如果当前路由是受限路由且用户未登录，就重定向
      if (protectedRoutes.includes(currentPath) && !isLoggedIn) {
        navigate('/login', { replace: true });
      }
    }
  }, [navigation, navigate]);

  return <Routes>{/* 你的路由配置 */}</Routes>;
}

• 前端校验只是辅助！一定要在后端接口也做权限校验，防止用户通过直接调用API获取受限数据。
• 会话状态建议用localStorage/sessionStorage或者全局状态管理工具（比如Redux、Context）来维护，确保状态在整个应用里的一致性。

内容的提问来源于stack exchange，提问作者Los Morales