使用NavHashLink报React不识别DOM元素isActive属性警告的解决方法

该警告由react-router-hash-link与本地安装的react-router版本适配缺陷导致，不影响组件实际功能：

• React Router 内部会给导航类组件传递isActive标识，用来标记当前链接是否处于激活状态，这个属性属于组件层的自定义状态，不应该透传到原生DOM元素上。
• 当使用的react-router-hash-link版本和当前React Router大版本不匹配（常见于React Router v6搭配旧版hash-link包），组件内部没有做属性拦截，会直接把isActive属性挂到最终渲染的<a>标签上。
• React 检测到DOM元素上挂载了非标准的自定义属性，就会抛出该提示，由于属性本身不会影响链接的跳转、滚动定位逻辑，所以功能表现完全符合预期。

按优先级从高到低可选择以下方案：

• 升级依赖到兼容版本
  直接将两个相关依赖升级到适配的稳定正式版，从根源修复属性透传问题，执行安装命令即可：

  npm install react-router-dom@latest react-router-hash-link@latest
  

  升级后组件内部会正确消费isActive状态，不会再往DOM透传非标准属性，警告自动消除。

• 用回调形式的className消费isActive属性
  如果暂时无法升级依赖，可以给组件传入函数格式的className属性，主动接收isActive参数，触发组件内部的状态消费逻辑，避免属性被透传到DOM，示例代码：

  <NavHashLink
    to="#contact"
    className={({ isActive }) => {
      // 可根据激活状态追加自定义类名，无激活样式需求直接返回固定类名即可
      return `btn btn-primary ${isActive ? 'custom-active-class' : ''}`.trim()
    }}
  >
    联系我们
  </NavHashLink>
  

• 自定义包装层拦截冗余属性
  如果上述方案仍未消除警告，可以写一层轻量包装组件，手动拦截isActive属性避免透传：

  import { NavHashLink as BaseNavHashLink } from 'react-router-hash-link';
  
  // 拦截掉非DOM标准的自定义属性
  const NavHashLink = ({ isActive, ...restProps }) => <BaseNavHashLink {...restProps} />;
  
  // 业务代码中直接使用包装后的组件即可
  <NavHashLink to="#contact" className="btn btn-primary">
    联系我们
  </NavHashLink>
  

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