嵌套路由 react-router v6答案

【问题标题】：Nested routes react-router v6嵌套路由 react-router v6
【发布时间】：2021-12-29 15:12:03
【问题描述】：

我正在尝试理解一些嵌套路由。我不确定我是否设置正确

我有一个名为 Dashboard 的组件，它将保存所有内容，但如果路径不匹配，它将显示 404 页面。当我尝试点击 /about 时，它总是将我引导到 404 页面？

【问题讨论】：

为什么不在 app.js 中给出所有 4 条路由？

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

【解决方案1】：

这可能是您正在寻找的：

https://codesandbox.io/s/react-router-v6-forked-v6xtk

• 正如Muhammed Jaseem 建议的那样——您的所有路由都应该放在一个组件中。

• 每页创建一个 js/jsx 组件也是更好的做法。

【讨论】：

我的计划是让仪表板包含导航栏，并根据选定的菜单项加载必要的页面。这就是为什么它不是全部在一个组件中的原因，所以在假设“/”路由中，它将加载仪表板，在仪表板中单击“/about”，它将作为子组件加载仪表板中的 about 组件
那是可敬的。如果您在Dashboard.js 上的代码进一步扩展，您可能会觉得需要隔离您的组件
这就是我正在尝试的工作，但似乎将我引导至未找到的页面。您能否更新您的示例，说明我应该如何设置它？仪表板应该加载任何子页面，如果没有找到路由，则显示未找到的页面（在仪表板之外）
当然，我在上面
我认为问题源于<Route path="*" element={<NotFoundPage />} />，这是路由器首先看到的。无论哪个不是/home，都会将您重定向到NotFoundPage

【解决方案2】：

应该在 app.js 文件中定义路由。

我假设您希望在点击“/home/about”时提供“About”组件。为此，您必须嵌套 Route 定义，例如：

<Route path="/home" element={<Dashboard />}>
      <Route path='/about' element={<About />}/>
      <Route path='/contact' element={<Contact />} />
</Route>

当然，“About”和“Contact”组件需要在它们自己的文件中，并以与导入“Dashboard”组件相同的方式导入。

最后，需要将 Dashboard.js 中“Link”组件的“to”属性更改为完整路径，例如“/home/about”。

【讨论】：

嵌套路由内的绝对路径是否允许？

【解决方案3】：

使用

<Route path="/home/*" element={<Dashboard />} />

和

<Link to="contact" className="link">Contact</Link>

【讨论】：