React Router：在没有上下文的情况下单独使用 <Outlet /> 的目的是什么？

Question

据我现在的理解，如果我们传递一个Outletwith 上下文，上下文之后的 props 可以传递到 child 中，而outlet 充当模板，将这些 props 传递到路由器可能渲染的任何子代中。

我的问题是，如果我们只是<Outlet />在没有上下文的情况下设置怎么办？如果它没有通过任何props，我们有什么理由特别想<Outlet />单独使用呢？

代码可能如下所示

索引.js

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="checkout" element={<Checkout />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

应用程序.js

function App() {
  return (
    <>
      <Reset />
      <GlobalStyle />
      <Header cartItems={cartItems} />
      <Outlet />
    </>
  )
}

Answer 1

该Outlet组件本身允许嵌套路由渲染其element内容以及布局路由正在渲染的任何其他内容，即导航栏、侧边栏、特定布局组件等。

<Routes>
  <Route path="/" element={<App />}>
    <Route path="checkout" element={<Checkout />} />
  </Route>
</Routes>

该Checkout组件在 上呈现"/checkout"。、和组件也都作为布局路由渲染的一部分Reset进行渲染。IE 中类似下面的内容被渲染到 DOM 中。GlobalStyleHeader"/"App

...
<Reset />
<Header cartItems={cartItems} />
<Checkout />
...

Answer 2

这是我用来理解Outlet概念的心智模型：