React Router v6 嵌套路由不起作用

Question

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

预期结果 -> /bilgi/detay

我已经试过了，但是 return 没有任何页面..

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

Answer 1

你可以这样做

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

Answer 2

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

详细了解 index routes and layout routes。

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

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

React Router v6 嵌套路由不起作用

React Router v6 Nested Routes doesn't work

reactjs

react-router