在 ReactJS 中使用布局时，子项不会呈现

Question

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

这是我的 App 组件：

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

这是我通过道具调用孩子的布局组件：

import React from 'react';

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

输出：

Answer 1

布局组件应该渲染一个 Outlet 来让嵌套的 Route 组件被渲染到。这与使用和呈现 children 属性的包装器组件不同。

有关详细信息，请参阅Layout Routes 和Outlet。

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

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

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

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