如何在独立文件中用Outlet实现react-router-dom嵌套保护路由

1. 编写routes.js配置文件 #

将公开路由和受保护路由分别定义为数组，受保护路由通过嵌套结构用ProtectedLayout包裹：

import { About, Login, User } from "./components";
import { ProtectedLayout } from "./layouts";

// 公开路由
export const publicRoutes = [
  { path: "/", element: <About /> },
  { path: "/login", element: <Login /> },
];

// 受保护路由（嵌套结构，自动应用ProtectedLayout）
export const privateRoutes = [
  {
    element: <ProtectedLayout />,
    children: [
      { path: "/user", element: <User /> },
      // 可添加更多需要保护的路由，比如 "/profile"、"/settings" 等
    ],
  },
];

2. 确保ProtectedLayout包含Outlet #

你的ProtectedLayout必须通过Outlet渲染子路由内容，同时实现认证逻辑：

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

export function ProtectedLayout() {
  // 替换为你的实际认证判断逻辑（比如从Context、localStorage获取）
  const isAuthenticated = localStorage.getItem("token") !== null;

  if (!isAuthenticated) {
    // 未登录则跳转到登录页
    return <Navigate to="/login" replace />;
  }

  return (
    <div className="protected-layout">
      {/* 这里可以添加公共布局元素，比如导航栏、侧边栏 */}
      <Outlet /> {/* 渲染受保护的子路由页面 */}
    </div>
  );
}

3. 在主组件中使用useRoutes渲染路由 #

直接导入路由配置数组，用useRoutes生成路由元素：

import { useRoutes } from "react-router-dom";
import { publicRoutes, privateRoutes } from "./routes";

function App() {
  const publicRoutesElement = useRoutes(publicRoutes);
  const protectedRoutesElement = useRoutes(privateRoutes);

  return (
    <div className="app-container">
      {publicRoutesElement}
      {protectedRoutesElement}
    </div>
  );
}

export default App;

原理说明 #

useRoutes的配置结构和<Routes>/<Route>的JSX写法完全对应：

• 父路由的element指定ProtectedLayout，所有children数组中的路由都会自动继承这个布局
• ProtectedLayout中的Outlet会负责渲染子路由的内容，同时完成认证拦截逻辑

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