React Router v6 嵌套路由不起作用

法提赫

我想用嵌套路由渲染子路由。

预期结果 -> /bilgi/detay

我试过这样，但它没有返回任何页面..

<Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="bilgi"  element={<Information />} >
           <Route path='detay'  element={<Contact/>}/>
        </Route>
</Routes>

德鲁里斯

嵌套Route组件需要一个Outlet组件来渲染。

应用以下任一：

让Information组件渲染Outlet要渲染到的嵌套路由。这将呈现整个Information嵌套路由的内容。

import { Outlet } from 'react-router-dom';

...

const Information = () => {
  ...

  return (
    <>
      ... Information JSX ...
      <Outlet /> // <-- nested routes render here
    </>
  );
};

...

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="bilgi" element={<Information />} >
    <Route path="detay" element={<Contact />} />
  </Route>
</Routes>

转换path="bilgi"成Outlet单独渲染的布局路由，移动Information到自己的嵌套索引路由中，在布局路由的匹配路径上渲染。如果没有提供任何道具，则路由Outlet默认呈现一个。element这会单独渲染每个路由组件。
```
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="bilgi">
    <Route index element={<Information />} />
    <Route path="detay" element={<Contact />} />
  </Route>
</Routes>
```

阅读有关索引路线和布局路线的更多信息。

您可以使用 OFC，根本不嵌套路由并呈现具有绝对路径的平面列表。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/bilgi" element={<Information />} />
  <Route path="/bilgi/detay" element={<Contact />} />
</Routes>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。