react-router v6 封装公私路由的方案是否合理，会引发性能问题吗？

方案合理性判断 #

你当前采用的「公共路由+私有路由双wrapper」的设计是React项目路由权限控制的主流成熟方案，完全符合你的业务需求，逻辑本身是通顺的，能够解决已认证用户访问登录页的问题，方案合理性没有问题。

现有代码bug修正 #

你提供的RequireAuth组件存在逻辑笔误，会导致功能完全不可用，需要先修正：

// 原错误逻辑
if (token) {
  return <div>App is loading ...</div>
}
// 修正为：只有token还在拉取校验中时才显示加载
if (tokenChecking) {
  return <div>App is loading ...</div>
}

修正后两个wrapper的逻辑是对称的，符合预期：

• 公共路由：token校验中显示加载 → 有token跳转到内部页 → 无token渲染公共页面（如登录页）
• 私有路由：token校验中显示加载 → 无token跳转到登录页 → 有token渲染受保护页面

性能问题说明 #

你完全不需要担心该方案的性能问题：

• 两个wrapper都是轻量组件，仅订阅了Redux中auth模块的token和tokenChecking两个状态，只有这两个值发生变化时才会触发重渲染，没有多余的性能开销
• 路由遍历渲染是常规操作，只要你的路由配置数量不是数百条级别的，不会产生任何可感知的性能影响

可选优化方向（让代码更简洁） #

如果想进一步精简代码，可以参考以下调整：

• 把两个组件重复的加载逻辑抽成公共的<Loading />组件，统一维护加载样式
• 可以把双wrapper的逻辑合并成一个统一的权限wrapper，减少重复代码：

function AuthWrapper({ children, isProtected }: { children: JSX.Element, isProtected: boolean }) {
  const location = useLocation();
  const {token, tokenChecking} = useAppSelector((state) => state.auth);
  
  if (tokenChecking) return <Loading />

  if (isProtected) {
    if (!token) return <Navigate to="/login" state={{ from: location }} />
  } else {
    if (token) return <Navigate to={location.state?.from || "/dashboard"} replace />
  }

  return children
}

对应的路由渲染逻辑可以直接简化为：

return (
  <Routes>
    {routes.map((route, index) => (
      <Route
        key={index}
        path={route.path}
        element={
          <AuthWrapper isProtected={route.isProtected}>
            <route.component />
          </AuthWrapper>
        }
      />
    ))} 
    <Route path="*" element={<NotFoundPage />} />
  </Routes>
);

这样代码量更少，逻辑也更集中，后续修改权限规则只需要改AuthWrapper一个组件即可。

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