React Router v6中NavLink的isActive状态无法更新内联样式问题

该问题的核心诱因有两类，对应修复方案如下： #

原因1：map回调语法错误 #

问题代码中数组map方法的回调参数写法有误，解构传参时漏了外层的圆括号，属于JS基础语法错误，会导致回调函数无法被正确解析，动态style逻辑自然不会生效。

错误写法 #

{siteLinks.map({ href, name }) => {
  return (
    <NavLink
      key={href}
      to={href}
      style={({ isActive }) => ({
        backgroundColor: isActive ? 'gray' : 'transparent',
     })}
    >
       <p>{name}</p>
   </NavLink>
}

修正写法 #

给map的回调参数补上圆括号即可：

{siteLinks.map(({ href, name }) => {
  return (
    <NavLink
      key={href}
      to={href}
      style={({ isActive }) => ({
        backgroundColor: isActive ? 'gray' : 'transparent',
     })}
    >
       <p>{name}</p>
   </NavLink>
  )
})}

原因2：React Router v6版本不兼容 #

函数形式的style/className属性（接收isActive入参的写法）是在react-router-dom@6.3.0版本才正式支持的，如果项目安装的v6版本低于6.3.0，就算语法写对了也识别不了函数形式的style，这也是为什么传入固定对象样式可以正常生效的原因。

解决方案 #

• 若项目允许依赖升级：直接把react-router-dom升级到6.3.0以上的稳定版本，修复上述语法错误后函数式style就能正常运行。
• 若不方便升级依赖：使用NavLink自带的activeStyle属性单独配置激活态样式即可，兼容所有v6正式版本：

{siteLinks.map(({ href, name }) => {
  return (
    <NavLink
      key={href}
      to={href}
      style={{ backgroundColor: 'transparent' }}
      activeStyle={{ backgroundColor: 'gray' }}
    >
       <p>{name}</p>
   </NavLink>
  )
})}

额外提示：如果不想写内联样式，完全可以直接用NavLink激活时自动添加的active类名，在全局CSS/组件样式里写对应类的样式规则，不需要额外处理状态，适配所有v6版本。

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