React中NavLink激活态如何切换图标且保留激活样式

之前配置自定义isActive后激活样式失效，本质是实现逻辑破坏了NavLink的原生激活判定链路：

• 用useState手动维护newActiveLink状态，替换了NavLink自带的路由匹配逻辑，组件内部无法识别激活状态，内置的activeStyle自然失去触发条件
• 自定义isActive回调没有透传react-router默认的路由匹配结果，直接返回手动维护的状态值，进一步打断了激活态的判断流程

完全不需要改动你已经调好的紫色激活背景、文字颜色配置，复用NavLink原生能力即可实现图标切换，全程不需要额外维护手动状态：

• 移除之前新增的自定义isActive回调、手动维护的newActiveLink状态变量，先恢复原本正常生效的激活样式效果
• 保留原有activeStyle配置不变，利用NavLink官方支持的子元素渲染函数能力，直接在渲染阶段读取组件内部的isActive状态，根据状态判断切换对应图标资源

参考实现代码：

// 导航数据源提前配置两套图标资源
const navItemList = [
  { path: '/dashboard', label: '工作台', icon: '/icon-dashboard-gray.png', iconActive: '/icon-dashboard-white.png' },
  { path: '/setting', label: '系统设置', icon: '/icon-setting-gray.png', iconActive: '/icon-setting-white.png' }
]

<List>
  {navItemList.map(item => (
    <ListItem key={item.path} disablePadding>
      <NavLink
        to={item.path}
        style={{ width: '100%', textDecoration: 'none' }}
        // 保留原本配置的激活态样式，不做任何修改
        activeStyle={{
          backgroundColor: '#673ab7',
          color: '#fff'
        }}
      >
        {/* 直接通过渲染函数拿到组件内部的激活状态，无额外状态维护 */}
        {({ isActive }) => (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px' }}>
            <img src={isActive ? item.iconActive : item.icon} alt={item.label} />
            <span>{item.label}</span>
          </div>
        )}
      </NavLink>
    </ListItem>
  ))}
</List>

• 该方案中用到的isActive判断逻辑，和触发activeStyle的判断逻辑完全同源，不会出现图标切换和背景样式不同步的问题
• 若后续需要自定义路由激活规则（比如带路径通配符的匹配场景），配置isActive回调时，必须将默认的路由匹配结果（回调入参的match、location对象）和自定义判断逻辑结合后返回值，不能直接返回手动维护的状态值，否则会再次打断原生激活判定链路
• 若使用react-router v6及以上版本，原本的activeStyle配置需替换为style回调函数，核心逻辑保持一致：读取入参的isActive状态，同时设置激活样式、切换对应图标

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