React中使用useRoutes管理双布局及嵌套路由空白问题

你的代码存在两个核心问题导致路由异常：

1. 包裹MainLayout的路由未设置path属性，导致根路径/和/schedule无法匹配到对应布局，内层子路由也无法正确关联布局；
2. /schedule路由使用了绝对路径，不符合嵌套路由的相对路径规范，会跳过父布局的渲染逻辑。

修正后的完整代码 #

布局组件

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

// 主布局
const MainLayout = () => {
  return (
    <div className="main-layout">
      {/* 可添加主布局公共内容，如导航栏、侧边栏 */}
      <Outlet /> {/* 嵌套路由内容渲染位置 */}
    </div>
  );
};

// 收入模块布局
const RevenueLayout = () => {
  return (
    <div className="revenue-layout">
      {/* 可添加收入模块公共内容，如专属导航、统计栏 */}
      <Outlet /> {/* 嵌套路由内容渲染位置 */}
    </div>
  );
};

路由配置

const MainRoutes = [
  // 主布局路由组
  {
    path: "/",
    element: <MainLayout />,
    children: [
      {
        index: true, // 匹配根路径"/"
        element: <h1>主布局首页</h1>
      },
      {
        path: "schedule", // 相对路径，完整路径为"/schedule"
        element: <h1>主布局日程页</h1>
      }
    ]
  },
  // 收入模块布局路由组
  {
    path: "/revenue",
    element: <RevenueLayout />,
    children: [
      {
        index: true, // 匹配"/revenue"
        element: <h1>收入模块首页</h1>
      },
      {
        path: "send-offer-letter", // 相对路径，完整路径为"/revenue/send-offer-letter"
        element: <h1>发送报价函页面</h1>
      }
    ]
  }
];

在App中使用路由

import { useRoutes } from "react-router-dom";

function App() {
  const routingElements = useRoutes(MainRoutes);
  return routingElements;
}

export default App;

根组件包裹BrowserRouter（index.js）

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

关键修正点说明 #

• 每个布局路由都明确设置path和element，确保路由匹配时能渲染对应布局；
• 子路由使用相对路径，继承父路由路径前缀，保证嵌套关系正确；
• 用index: true匹配父路由的默认路径，避免重复设置path；
• 布局组件通过Outlet渲染子路由内容，这是嵌套路由生效的核心。

修改后，访问/revenue/send-offer-letter即可正常渲染页面内容，两种布局也会分别作用于各自的路由组。

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