如何在 React 中创建嵌套路由？答案

【问题标题】：How to create Nested Routing in React?如何在 React 中创建嵌套路由？
【发布时间】：2022-08-17 23:37:21
【问题描述】：

我创建了这个页面。顶部导航栏作为例外工作完美。

导航链接：-

...
<NavLink to=\"/about\" id=\"menu\" className=\"nav-link\">About</NavLink>
...

路由： -

<Routes>
       ...
       <Route path=\"/about\" element={<About/>} />
       ...
</Routes>

我想要下面的导航栏简介和时间表在其下方渲染组件。

我已经为下面的导航栏编写了代码关于组件如下：-

导航链接：-

<NavLink to=\"/about/profile\" id=\"menu\" className=\"nav-link\">Profile</NavLink>
<NavLink to=\"/about/timeline\" id=\"menu\" className=\"nav-link\">Timeline</NavLink>

路由： -

<Routes>
      <Route path=\"/about/profile\" element={<Profile />}/>
      ...
</Routes>

但它呈现空白组件。我想在 About Component 中渲染所需的组件

我没有看到任何嵌套路由。 <Route path=\"/about/profile\" element={<Profile />} /> 是同级路由吗？你能发布一个更完整的minimal reproducible example吗？

标签： reactjs react-router react-router-dom

【解决方案1】：

看看这个帖子...

React nested routes

【讨论】：