使用 React Router 访问嵌套导航时如何保持导航处于活动状态？

Question

有没有一种方法可以导航到嵌套路线并保持主导航处于活动状态？

例如，这是主导航http://localhost:3000/#/tractian/assets-list并且我从React Router获得了一个active class ：

但是，如果我导航到嵌套路线，则 class 将被删除： http://localhost:3000/#/tractian/assets-list/asset/1

我怎么能保留react-router不应该明白这是一个嵌套路由吗？

这是我的代码示例：

<HashRouter>
  <Layout>
    <Switch>
      <Route
        path={`${process.env.PUBLIC_URL}/assets-list`}
        exact
        component={AssetsList}
      />
      <Route
        path={`${process.env.PUBLIC_URL}/assets-list/asset/:id`}
        component={AssetComponent}
     />
    </Switch>
  </Layout>
</HashRouter>

导航：

<ul className={classes["SideNavigation--navigation-items"]}>
  <h1>LOGO</h1>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/`} exact>Overview</NavLink>
  </li>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/assets-list` } exact>Ativos</NavLink>
  </li>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/users-list`} exact>Usuários</NavLink>
  </li>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/units-list`} exact>Unidades</NavLink>
  </li>
</ul>

NESTED NAVIGATION:
```jsx
<NavLink to={`${process.env.PUBLIC_URL}/assets-list/asset/${item.id}`}>
  TESTE
</NavLink>

我试图将路线嵌套在主要路线中，但没有成功：

<Route
  path={`${process.env.PUBLIC_URL}/assets-list`}
  exact
  component={AssetsList}
>
  <Route
    path={`${process.env.PUBLIC_URL}/assets-list/asset/:id`}
    component={AssetComponent}
  />
</Route>

Answer 1

所有NavLink组件都与 URL 路径完全匹配，因此如果您在嵌套路线上，则父路径不再完全匹配。

参见v5 NavLink exact prop

从链接中删除您希望在匹配和呈现子路由时也被匹配为活动的exact属性。

例子：

<ul className={classes["SideNavigation--navigation-items"]}>
  <h1>LOGO</h1>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/`} exact>
      Overview
    </NavLink>
  </li>
  <li>
    {/* Not exact path matching, allow sub-route active matching */}
    <NavLink to={`${process.env.PUBLIC_URL}/assets-list`}>
      Ativos
    </NavLink>
  </li>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/users-list`} exact>
      Usuários
    </NavLink>
  </li>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/units-list`} exact>
      Unidades
    </NavLink>
  </li>
 </ul>

<NavLink to={`${process.env.PUBLIC_URL}/assets-list/asset/${item.id}`}>
  TESTE
</NavLink>

Answer 2

一种方法是使用“useLocation”挂钩获取当前的 URL。然后您可以将当前的 URL 与导航链接的 URL 进行比较，并根据差异进行比较。