React Router DOM 6.6.1 受保护路由配置异常问题求助

看起来你遇到的问题是公开路由（比如ForgotPassword）意外触发了受保护路由的重定向逻辑，咱们来一步步分析原因和解决办法。

首先看你的路由配置：你把/作为受保护路由的父路径，而ForgotPassword、Login这些公开路由是和/平级的。理论上，访问/forgot-password应该直接渲染对应的组件，不会经过Protected组件。那为什么会被重定向？

可能的原因分析 #

1. 路由路径配置错误
   最常见的情况是routes.FORGOT_PASSWORD的实际值不符合预期：

   • 如果routes.FORGOT_PASSWORD被设置为''或者/，访问它会直接匹配到/路由，从而触发Protected的重定向。
   • 如果routes.FORGOT_PASSWORD是拼写错误的路径（比如少写了斜杠或者字母），会导致路由匹配失败， fallback 到其他路由逻辑。

   你可以先打印routes.FORGOT_PASSWORD的值，确认它是/forgot-password这类独立的绝对路径。

2. 受保护路由的边界模糊
   你把根路径/作为受保护路由的父节点，虽然逻辑上公开路由是平级的，但如果路由匹配时出现优先级问题（比如路径前缀匹配的歧义），可能会意外触发Protected组件。

解决方案 #

方案1：修正路由路径配置

先确保routes对象中的路径都是正确的绝对路径，比如：

export const routes = {
  HOME: '/home',
  SETTINGS: '/settings',
  FORGOT_PASSWORD: '/forgot-password',
  LOGIN: '/login',
};

确认ForgotPassword和Login的路由是完全独立的顶级路由，和/路由平级。

方案2：调整受保护路由的结构（更推荐）

把受保护路由统一放在一个独立的父路径下（比如/app），彻底划清公开路由和受保护路由的边界，避免根路径带来的匹配歧义：

const router = createBrowserRouter([
  {
    // 所有受保护路由的父路径
    path: "/app",
    element: <Protected />,
    children: [
      { path: "", element: <Root /> }, // 对应 /app
      { path: routes.SETTINGS, element: <Settings /> }, // 对应 /app/settings
    ]
  },
  // 根路径重定向到受保护的首页
  { path: "/", element: <Navigate to="/app" replace /> },
  // 公开路由
  { path: routes.FORGOT_PASSWORD, element: <ForgotPassword /> },
  { path: routes.LOGIN, element: <Login /> },
  // 404页面
  { path: "*", element: <NotFound /> },
]);

方案3：优化Protected组件的逻辑

为了避免判断逻辑出错，同时提升用户体验，你可以优化Protected组件：

export default function Protected() {
  const { getFromStorage } = useLocalStorage();
  const location = useLocation();
  // 确保isAuthenticated是布尔值，避免undefined被误判为false
  const isAuthenticated = !!getFromStorage('user')?.isAuthenticated;

  return isAuthenticated ? (
    <Outlet />
  ) : (
    // 保存当前访问位置，登录后可直接重定向回来
    <Navigate to={routes.LOGIN} replace state={{ from: location }} />
  );
}

这样调整后，公开路由就不会再意外触发受保护路由的重定向逻辑了。

备注：内容来源于stack exchange，提问作者Boky