使用react-router-guards时出现react-router找不到__RouterContext错误求助

问题根源 #

react-router-guards这个库目前仅适配react-router v5及以下版本，而你当前使用的是react-router v6。react-router v6重构了内部API，移除了__RouterContext这个内部导出，因此react-router-guards尝试导入它时就会触发报错。

解决方案 #

方案1：降级react-router到v5版本 #

如果必须使用react-router-guards，可以将react-router和react-router-dom降级到v5：

1. 卸载当前版本：

   npm uninstall react-router react-router-dom
   

2. 安装v5稳定版：

   npm install react-router@5 react-router-dom@5
   

3. 注意：你的路由代码需要对应v5的写法，比如使用<Switch>组件、Route的component/render属性等，不能使用v6的<Routes>/<Outlet>等新API。

方案2：改用react-router v6原生的路由守卫实现 #

react-router v6本身可通过自定义组件实现路由守卫，无需依赖第三方库，示例如下：

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

// 自定义权限守卫组件
const GuardedRoute = ({ hasPermission }) => {
  // 替换为你的权限判断逻辑，比如检查用户登录状态、角色等
  if (!hasPermission) {
    // 无权限时跳转到登录页
    return <Navigate to="/login" replace />;
  }
  // 有权限时渲染子路由内容
  return <Outlet />;
};

// 在路由配置中使用
function AppRoutes() {
  const isUserLoggedIn = /* 你的登录状态判断逻辑 */;
  
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      {/* 受保护的路由组 */}
      <Route path="/dashboard" element={<GuardedRoute hasPermission={isUserLoggedIn} />}>
        <Route index element={<DashboardPage />} />
        <Route path="settings" element={<SettingsPage />} />
      </Route>
    </Routes>
  );
}

方案3：更换适配v6的第三方守卫库 #

如果不想自行编写守卫逻辑，可以选择维护状态良好、适配react-router v6的第三方库，比如react-router-auth（使用前请确认库的最新维护情况）。

注意事项 #

使用第三方路由库前，务必查看它的package.json中的peerDependencies字段，确认其支持的react-router版本，避免版本不兼容引发错误。

内容的提问来源于stack exchange，提问作者Nguyễn Điền Anh Việt