React Dashboard嵌套路由中如何正确切换NavLink的Active类？

React Router 的 NavLink 默认采用部分匹配规则——只要当前 URL 包含 to 属性里的路径，就会判定为激活状态。你的所有路由都带有 /dashboard 前缀（比如 /dashboard、/dashboard/users），切换到子路由时，/dashboard 的 NavLink 会因为路径包含前缀而一直处于激活状态，导致旧的 Active 类不会移除。

方法1：添加 end 属性（推荐） #

给需要完全匹配的 NavLink 加上 end 属性，只有当当前路径和 to 的值完全一致时，才会触发激活状态。

修改你的 Sidebar 组件中 NavLink 部分的代码：

<NavLink
  end // 新增这个属性
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
  to={singleData?.link}
>
  {singleData?.name}
</NavLink>

比如你的 SidebarData 里如果有一项是 link: "/dashboard"，加上 end 后，只有在访问 /dashboard 时它才会激活，进入 /dashboard/users 就会自动取消激活。

方法2：自定义激活判断逻辑 #

如果需要更灵活的匹配规则，可以通过 isActive 回调函数自定义判断逻辑，精确对比当前路径和目标路径：

<NavLink
  isActive={(match, location) => {
    // 只有当路径完全匹配时才返回true
    return match?.pathname === location.pathname;
  }}
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
  to={singleData?.link}
>
  {singleData?.name}
</NavLink>

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