就我现在所理解的,如果我们传递一个带有上下文的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 />
</>
)
}
3条答案
按热度按时间lnlaulya1#
Outlet
组件单独允许嵌套路由呈现其element
内容以及布局路由呈现的任何其他内容,即导航栏、侧边栏、特定布局组件等。Checkout
组件呈现在"/checkout"
上。Reset
、GlobalStyle
和Header
组件也都被渲染为布局路由"/"
渲染App
的一部分。例如,类似下面的内容被呈现到DOM。dsf9zpds2#
这是我用来理解“出路”概念的思维模式:
t9aqgxwy3#
元素用作占位符。在本例中,启用Users组件以呈现其子路由。因此,元素将根据当前位置呈现或元素。