React中NavLink不为动态路由添加active类的原因排查

你的NavLink写的是固定路径/uid/places，但实际配置的动态路由是/:userId/places，访问时路径是类似/2332/places这种。NavLink默认是严格匹配完整路径字符串的，这俩路径完全不一样，自然不会触发active类的添加。而静态路由/places/new和NavLink的to值完全一致，所以能正常激活。

方法1：自定义激活判断逻辑 #

给NavLink加个isActive属性，自己写匹配规则，只要当前路径符合/任意字符/places的格式就算激活：

<NavLink 
  to='/uid/places' 
  isActive={(match, location) => {
    return /^\/.+\/places$/.test(location.pathname);
  }}
>
  My Places
</NavLink>

方法2：用useMatch钩子检测路由匹配 #

在导航组件里用useMatch判断当前路径是否匹配动态路由，手动控制类名：

import { useMatch } from 'react-router-dom';

// 组件内部
const isActive = useMatch('/:userId/places');

<NavLink 
  to='/uid/places' 
  className={isActive ? 'active' : ''}
>
  My Places
</NavLink>

方法3：直接用真实用户ID生成路径 #

如果导航组件能拿到当前用户的userId，直接把to设为/${userId}/places，这样路径完全匹配，NavLink会自动激活：

// 假设userId是从状态或上下文获取的真实值
const userId = '2332';

<NavLink to={`/${userId}/places`}>My Places</NavLink>

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