Children 在 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

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

import React from 'react';

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

输出：

Answer 1

布局组件应呈现 Outlet 以供要呈现到的嵌套 Route 组件。这与使用和呈现 children 属性的包装器组件不同。

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

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

为了比较，包装器组件用于将子组件包装在 element 属性中。示例：

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

Children 在 ReactJS 中使用布局时不会呈现

Children won't render when using a layout in ReactJS

reactjs

react-router

react-router-dom