使用createBrowserRouter遇问题：MainLayout无法读取props，子路由无法访问

核心问题分析 #

你的代码存在两个关键问题导致布局无法渲染子路由、MainLayout无法获取子组件：

1. React Router v6中，布局路由的子组件需要通过<Outlet />渲染，而非直接使用props.children
2. 子路由使用了绝对路径（带/前缀），导致路由系统无法识别它们是父路由的子项

1. 修改MainLayout.js #

导入Outlet组件并替换props.children：

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

const MainLayout = () => {
  return (
    <>
      {/* Sidebar component is rendered on the left side */}
      <Sidebar />
       {/* Main content wrapped inside <main> tag */} 
      <main><Outlet /></main>
    </>
  );
};

export default MainLayout;

2. 修改Route.js中的路由配置 #

将子路由改为相对路径（移除路径前的/）：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
// 导入你的组件：Login, Register, MainLayout, Home, Profile, ProfileEdit, Chat, ErrorPage

const router = createBrowserRouter([
    {
      path: "/login",
      element: <Login />,
    },
    {
      path: "/register",
      element: <Register />,
    },
    {
      path: "/",
      element: <MainLayout />,
      children: [
        {
          path: "home", // 相对路径，对应完整路径/home
          element: <Home />,
        },
        {
          path: "profile/:profileId", // 相对路径，对应完整路径/profile/:profileId
          element: <Profile />,
          children: [
            {
              path: "edit", // 相对路径，对应完整路径/profile/:profileId/edit
              element: <ProfileEdit />,
            },
          ],
        },
        {
          path: "contacts/:userId", // 相对路径，对应完整路径/contacts/:userId
          element: <Chat />,
        },
      ],
    },
    { path: "*", element: <ErrorPage /> },
  ]);

const Routef = () => {
  return <RouterProvider router={router} />;
};

export default Routef;

3. 修正index.js的导入 #

确保导入的组件名称与Route.js的导出一致：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Routef from './Route'; // 这里要和你的文件路径、导出名称匹配

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <Routef />
  </React.StrictMode>
);

额外说明 #

• 侧边栏会自动在除Login、Register、NotFound外的页面显示，因为这些页面不属于MainLayout的子路由
• 所有相对路径会自动拼接父路由的路径，生成完整的URL

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