React Router v6 嵌套路由不起作用

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

预期结果 -> /bilgi/detay

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

<Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="bilgi"  element={<Information />} >
           <Route path='detay'  element={<Contact/>}/>
        </Route>
</Routes>
stack overflow React Router v6 Nested Routes doesn't work
原文答案
author avatar

接受的答案

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

应用以下任一:

  1. 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>
    
  2. 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>
    

阅读有关 index routeslayout routes 的更多信息。

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

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

答案:

作者头像

你可以这样做

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

我们不能再用 children 渲染子路由内容了。 react-router-dom 的新版本使用了 Slot/Outlet 概念,就像 vuejs 一样。我们需要指出应该在哪里呈现父级提供的插槽内容。

然后您需要添加信息组件。

在此处查看示例: https://github.com/remix-run/react-router/blob/4d915e3305df5b01f51abdeb1c01bf442453522e/examples/scroll-restoration/src/app.tsx