React Router v6中如何为NavLink添加自定义active激活类名

React Router v6 删掉了旧版本 NavLink 上的activeClassName、activeStyle属性，你写的旧版属性在v6里不会被解析，自然加不上激活类名。

v6 里 NavLink 的className支持传函数，函数入参里带isActive布尔值，路由匹配激活时这个值为true，你根据这个值拼接基础类名和激活类名就行。

对应你需求的代码：

<NavLink
  to="/"
  className={({ isActive }) =>
    `px-3 py-2 bg-primary ${isActive ? "btn-group-active" : ""}`
  }
>
  Home
</NavLink>

不想处理模板字符串里的空字符串的话，也可以用数组拼接后过滤空值的写法：

<NavLink
  to="/"
  className={({ isActive }) =>
    [
      "px-3 py-2 bg-primary",
      isActive ? "btn-group-active" : null
    ].filter(Boolean).join(" ")
  }
>
  Home
</NavLink>

给根路径/配导航的时候记得加end属性，不然访问/about、/detail这类子路由时，根路径导航会因为前缀匹配被误判为激活状态：

<NavLink
  to="/"
  end
  className={({ isActive }) =>
    `px-3 py-2 bg-primary ${isActive ? "btn-group-active" : ""}`
  }
>
  Home
</NavLink>

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