我在使用 createBrowserRouter 时遇到问题。 MainLayout 无法读取 props，我不知道为什么

Question

所有出口/进口工作正常。 MainLayout.js 文件是布局中的唯一文件： 除了“登录”、“注册”和“未找到”之外，所有页面的侧边栏都是固定的。 在文件夹布局中只有 MainLayout.js

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

Route.js 文件： 个人资料、个人资料编辑、主页（所有儿童）均无法访问

const router = createBrowserRouter([
   
    {
      path: "/login",
      element: <Login />,
    },
    {
      path: "/register",
      element: <Register />,
    },
    {
      path: "/",
      element: <MainLayout />,
      children: [
        {
          path: "/home",
          element: <Home />,
        },
        {
          path: "/profile/:profileId",
          element: <Profile />,
          children: [
            {
              path: "/profile/:profileId/edit",
              element: <ProfileEdit />,
            },
          ],
        },
        {
          path: "/contacts/:userId",
          element: <Chat />,
        },
      ],
    },
    { path: "*", element: <ErrorPage /> },
  ]);
const Routef = () => {
  return <RouterProvider router={router} />;
};

export default Routef;

index.js 文件：

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

Answer 1

虽然我不完全确定为什么这不起作用。我认为您应该考虑将子级移动到布局文件并在那里嵌套路由。

  const MainLayout = (props) => {
  return (
    <>
      {/* Sidebar component is rendered on the left side */}
      <Sidebar />
       {/* Main content wrapped inside <main> tag */} 
      <main>
        <Routes>
           <Route path="/home" element={<Home />}/>
            {/* Other routes here */}
        </Routes>
       </main>
    </>
  );
};