在 ReactJS 中使用布局时，子项不会渲染

Question

我在我的项目中使用 MUIv5 和 React-Router v6，在其中我想在页面周围包装布局，但页面没有渲染，我得到的只是一个空的 div

这是我的应用程序组件：

import React from "react";
import { Routes, Route } from "react-router-dom";
import { CssBaseline } from "@mui/material";

import MainLanding from './routes/MainLanding';
import StoreLanding from "./routes/StoreLanding";
import Layout from "./components/Layout";

const App = () =>{
    return(
        <>
            <CssBaseline/>
                <Routes>
                    <Route element={<Layout/>}>
                        <Route path="/" element={<MainLanding/>}/>
                        <Route path="/store" element={<StoreLanding/>}/>
                    </Route>
                </Routes>
        </>
    )
}

export default App

这是我通过 props 调用子组件的布局组件：

import React from 'react';

const Layout = ({ children }) => {
    return (
        <div>
            {children}
        </div>
    )
}
export default Layout;

输出：

Answer 1

布局组件应该渲染一个用于渲染的Outlet嵌套组件。Route这与使用和渲染childrenprop 的包装器组件不同。

更多详细信息，请参阅布局路线和出口。

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

const Layout = () => {
  return (
    <div>
      <Outlet /> // <-- nested routes rendered here!
    </div>
  )
};

为了进行比较，包装组件用于将子组件包装在elementprop 中。例子：

<Routes>
  <Route
    path="/"
    element={(
      <Layout>
        <MainLanding />
      </Layout>
    )}
  />
  <Route
    path="/store"
    element={(
      <Layout>
        <StoreLanding />
      </Layout>
    )}
  />
</Routes>