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

Question

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

我想打开并管理组件/ 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>

Answer 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>

这就是我要做的所有事情，如果您知道比这更干净的解决方案，请告诉我。

Answer 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" />

否则，如果您要呈现来自单个组件的所有链接 in/at/near 根目录，那么您可能需要使用绝对链接。

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

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

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

how to navigate submenu items using React Router Dom v6

javascript

routes

reactjs

react-router-dom