React Router访问嵌套路由时如何保持主导航激活状态？

核心问题原因 #

你的主导航NavLink添加了exact属性，这会让它仅在路径完全匹配时才触发激活状态。当跳转到嵌套路由/assets-list/asset/1时，路径与/assets-list并非完全一致，所以激活类会被移除。另外你之前尝试嵌套路由失败，是因为主路由也加了exact，导致访问嵌套路由时主路由不匹配，子路由无法渲染。

具体解决步骤 #

1. 移除主导航NavLink的exact属性 #

保留首页的exact避免其他路由误激活，其余导航项去掉exact，让NavLink匹配所有以目标路径开头的路由：

<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`}>Ativos</NavLink>
  </li>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/users-list`}>Usuários</NavLink>
  </li>
  <li>
    <NavLink to={`${process.env.PUBLIC_URL}/units-list`}>Unidades</NavLink>
  </li>
</ul>

2. 调整路由结构，正确配置嵌套路由 #

去掉主路由的exact属性，并确保主组件AssetsList中渲染子路由的内容：

修改后的路由配置：

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

在AssetsList组件中添加子路由渲染入口：

function AssetsList(props) {
  return (
    <div>
      {/* AssetsList原有业务内容 */}
      {props.children} {/* 渲染嵌套的AssetComponent组件 */}
    </div>
  );
}

3. 可选：自定义激活匹配规则（精细控制场景） #

如果不想完全移除exact，可以通过isActive属性自定义激活逻辑：

<NavLink 
  to={`${process.env.PUBLIC_URL}/assets-list`}
  isActive={(match, location) => {
    // 只要路径以/assets-list开头就激活
    return location.pathname.startsWith(`${process.env.PUBLIC_URL}/assets-list`);
  }}
>
  Ativos
</NavLink>

完成以上调整后，访问/assets-list及其所有嵌套路由时，主导航的Ativos项都会保持激活状态。

内容的提问来源于stack exchange，提问作者Berg_Durden