修改NavLink的to属性为对象格式后activeClassName失效如何解决

问题根因 #

你遇到的activeClassName失效是React Router的NavLink默认匹配逻辑导致的：当to属性传入带state的对象格式时，部分版本的NavLink会把state字段也纳入路由匹配校验规则，当前路由的state不存在scroll: true配置时，就会判定路由未激活，不会添加对应的激活类名。

解决方案 #

方案1：自定义isActive匹配规则（优先推荐）

手动指定NavLink的激活判断逻辑，只校验路径匹配即可，忽略state字段的校验：

<NavLink 
  to={{
    pathname: `${option.value}`,
    state: {scroll: true}
  }} 
  activeClassName="active"
  // 自定义激活判断逻辑
  isActive={(match, currentLocation) => {
    if (!match) return false
    // 只匹配路径，忽略state等其他参数
    return currentLocation.pathname === option.value
  }}
>
  Click Me
</NavLink>

如果是React Router v6版本，官方已取消activeClassName属性，要通过className的回调参数实现，写法如下：

<NavLink 
  to={{
    pathname: `${option.value}`,
    state: {scroll: true}
  }} 
  className={({ isActive }) => isActive ? "active" : ""}
>
  Click Me
</NavLink>

如果需要精确匹配路径避免嵌套路由误激活，给NavLink添加end属性即可。

方案2：临时存储参数（备选）

如果不想修改NavLink的匹配逻辑，可以先把scroll标记存入sessionStorage，跳转后从sessionStorage取值再删除对应字段，to属性直接传路径字符串即可，也不会影响activeClassName生效。

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