當我是 nestin 路由時,如何傳遞props
給<Outlet />
組件?
// Parrent Comp
{
const [format, setFormat] = useState('rgb');
const color = [hex, rgb, rgba]
// ...
return (
<PaletteNavBar changeFormat={setFormat}/>
{colorId ? <ColorBoxes /> : <Outlet color={color[format]} />}
// setFormat(hex) is called down here
<PaletteFooter />;
)
}
我不想通過 URL 參數傳遞它們。
在Outlet
不採取任何道具,也不會到它呈現什麼東西傳遞。它只是組件子路由的輸出。
將它們傳遞給由 Route 呈現的組件,它是呈現到 Outlet 中的 Route。
例子:
const Layout = () => (
<div className="super-style">
<h1>My super awesome layout container</h1>
<Outlet /> // <-- children routes rendered here
</div>
);
...
<Routes>
<Route element={<Layout />}>
<Route // <-- rendered into Outlet of Layout
path="..."
element={<Component foo="bar" />} // <-- pass props to component here
/>
</Route>
... other routes for outlet
</Routes>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句