在 React Router v6 中嵌套路由時將道具傳遞給 <Outlet />?

海瑟姆6373

當我是 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章