如何使用 React Router Dom v6 导航子菜单项答案

【问题标题】：how to navigate submenu items using React Router Dom v6如何使用 React Router Dom v6 导航子菜单项
【发布时间】：2022-01-09 13:01:05
【问题描述】：

我正在创建一个包含带有子项目的侧边栏的反应应用程序。

我想打开manage/url下的组件（比如manage/sub1、manage/sub2）。

我试图在 /manage 中创建一个嵌套路由，但它再次重定向到 /manage。有什么办法吗？

const App = () => (
  <div>
    <Routes>
      <Route path="/" element={<PublicRoute />}>
        <Route path="login" element={<Login />} />
      </Route>

      <Route path="/" element={<PrivateRoute />}>
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="manage" element={<Manage />} />
        <Route path="sub1" element={<Sub1 />} />
        <Route path="sub2" element={<Sub2 />} />
      </Route>

    </Routes>
  </div>
);

我的侧边栏导航代码

<NavItem link="/manage" icon={HappinessIcon} label="Manage" hasSubItem>
 <div>
    <NavSubItem link="/sub1" label="Sub Item 1" />
    <NavSubItem link="/sub2" label="Sub Item 2" />
 </div>
</NavItem>

【问题讨论】：

标签： javascript reactjs routes react-router-dom

【解决方案1】：

阅读 v6 文档后，我发现在这种情况下嵌套对我没有帮助。我只需要在所有子项前添加管理/。

<Route path="manage/sub1" element={<Sub1 />} />
<Route path="manage/sub2" element={<Sub2 />} />

在我的侧边栏导航代码上

<NavItem link="/manage" icon={HappinessIcon} label="Manage" hasSubItem>
 <div>
    <NavSubItem link="/manage/sub1" label="Sub Item 1" />
    <NavSubItem link="/manage/sub2" label="Sub Item 2" />
 </div>
</NavItem>

这就是我所要做的，如果你知道任何比这更干净的解决方案，请告诉我。

【讨论】：

【解决方案2】：

如果你想嵌套路由，你可以使用布局和索引路由的组合来完成它。

例子：

<Routes>
  <Route element={<PublicRoute />}>
    <Route path="/login" element={<Login />} />
  </Route>
  <Route element={<PrivateRoute />}>
    <Route path="/dashboard/*">
      <Route index element={<Dashboard />} />
    </Route>
    <Route path="/manage/*">                   // layout to allow nested route matching
      <Route index element={<Manage />} />     // "/mangage"
      <Route path="sub1" element={<Sub1 />} /> // "/mangage/sub1"
      <Route path="sub2" element={<Sub2 />} /> // "/mangage/sub2"
    </Route>
  </Route>
</Routes>

如果Manage 组件正在呈现链接，则它们可以是相对链接

<NavSubItem link="sub1" label="Sub Item 1" />
<NavSubItem link="sub2" label="Sub Item 2" />

否则，如果您要在根中/处/附近呈现单个组件的所有链接，那么您可能需要使用绝对链接。

<NavSubItem link="/manage/sub1" label="Sub Item 1" />
<NavSubItem link="/manage/sub2" label="Sub Item 2" />

相对链接和绝对链接的区别在于前导斜杠"/" 字符。

【讨论】：