React v2.20.2+TypeScript中<Navigate>无法渲染Login组件的问题

核心原因 #

1. 路由循环陷阱：如果把Login路由也包裹在Protected组件的嵌套路由中，未认证时跳转/login会再次触发Protected的认证检查，陷入无限跳转循环，导致Login组件根本无法渲染。
2. Outlet使用错误：Outlet是react-router-dom中用来渲染嵌套路由内容的组件，直接返回Outlet会无条件渲染所有受保护的子路由，无法实现仅显示登录页的需求。

正确实现方式 #

1. 编写正确的Protected组件 #

该组件仅在用户已认证时渲染受保护的路由内容，未认证时直接跳转到公开的登录页：

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

interface ProtectedProps {
  isAuthenticated: boolean;
}

const Protected = ({ isAuthenticated }: ProtectedProps) => {
  // 未认证时跳转登录页，replace避免历史记录堆积
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  // 已认证时渲染受保护的子路由
  return <Outlet />;
};

export default Protected;

2. 配置合理的路由结构 #

将Login路由设为公开路由（不被Protected包裹），仅把需要认证的路由放在Protected的嵌套路由中：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Protected from './Protected';
import Login from './Login';
import Dashboard from './Dashboard';
import Profile from './Profile';

// 从你的状态管理工具（如Context/Redux）或localStorage获取认证状态
const getAuthStatus = () => {
  return localStorage.getItem('token') !== null;
};

const router = createBrowserRouter([
  // 公开登录路由，不受Protected限制
  {
    path: '/login',
    element: <Login />,
  },
  // 受保护路由组，所有子路由都需要认证
  {
    element: <Protected isAuthenticated={getAuthStatus()} />,
    children: [
      { path: '/', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      // 其他需要登录才能访问的路由
    ],
  },
  // 404路由：未匹配到任何路由时跳转首页（或登录页）
  {
    path: '*',
    element: <Navigate to="/" replace />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

关键注意事项 #

• 确保isAuthenticated的状态是实时更新的：比如在用户登录/登出时同步更新状态，让Protected组件能重新渲染并执行认证检查。
• 使用Navigate的replace属性：避免跳转后浏览器历史栈中留下大量重复的登录页记录，提升用户体验。

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