reactjs React路由器:没有上下文单独使用的目的是什么< Outlet />?

kiz8lqtg  于 2023-05-17  发布在  React
关注(0)|答案(3)|浏览(155)

就我现在所理解的,如果我们传递一个带有上下文的Outlet,上下文之后的props可以传递到child中,outlet充当一个模板,将这些props传递到路由器可能呈现的任何子节点。
我的问题是,如果我们只设置<Outlet />而不设置上下文呢?如果它不传递任何props,那么我们为什么特别想单独使用<Outlet />呢?
代码可能看起来像这样
index.js

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

App.js

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

lnlaulya1#

Outlet组件单独允许嵌套路由呈现其element内容以及布局路由呈现的任何其他内容,即导航栏、侧边栏、特定布局组件等。

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

Checkout组件呈现在"/checkout"上。ResetGlobalStyleHeader组件也都被渲染为布局路由"/"渲染App的一部分。例如,类似下面的内容被呈现到DOM。

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

dsf9zpds2#

这是我用来理解“出路”概念的思维模式:

t9aqgxwy

t9aqgxwy3#

元素用作占位符。在本例中,启用Users组件以呈现其子路由。因此,元素将根据当前位置呈现或元素。

相关问题