React Router搭配NavHashLink的哈希链接activeClassName激活失效问题

问题根源 #

NavHashLink默认的路由匹配逻辑会将完整URL（包含哈希片段）纳入比对范围：当路由实际匹配到/home路径时，to='/home#bottom'的链接会拿完整的/home#bottom路径值和当前路由规则做匹配，自然无法命中预设的/home路由，导致激活样式无法触发。
以下是经过项目验证的可行修复方案： #

方案1：自定义isActive判断逻辑，剥离哈希片段的干扰 #

NavHashLink完全继承了原生NavLink的isActive回调参数，我们可以在回调里仅判断路径部分的匹配关系，完全忽略哈希片段的影响：

import { NavHashLink } from 'react-router-hash-link';

// 自定义激活判断：只要当前路径和目标链接的纯路径一致就判定为激活
const matchActive = (targetPath) => (match, location) => {
  if (!match) return false;
  return location.pathname === targetPath;
};

// 业务代码使用示例
<NavHashLink
  to='/home#bottom'
  activeClassName='activelink'
  isActive={matchActive('/home')}
>带锚点的首页入口</NavHashLink>

<NavHashLink
  to='/home'
  activeClassName='activelink'
  isActive={matchActive('/home')}
>普通首页入口</NavHashLink>

方案2：封装通用NavHashLink组件，统一内置匹配规则 #

如果项目里有大量带哈希的导航链接，可以直接封装通用组件，自动从to属性中拆分纯路径做匹配判断，避免每个链接单独写匹配逻辑：

import { NavHashLink } from 'react-router-hash-link';
import { useLocation } from 'react-router-dom';

const SmartNavHashLink = (props) => {
  const { to, ...rest } = props;
  const location = useLocation();
  // 从to属性中拆分纯路径部分，剔除#后的哈希值
  const targetPath = to.split('#')[0];
  // 仅比对路径和当前路由是否一致，作为激活判断依据
  const isActive = location.pathname === targetPath;

  return (
    <NavHashLink
      {...rest}
      to={to}
      className={isActive ? 'activelink' : ''}
    />
  )
}

// 业务侧直接使用封装好的组件，无需重复写匹配逻辑
<SmartNavHashLink to='/home#bottom'>带底部锚点的首页链接</SmartNavHashLink>
<SmartNavHashLink to='/home'>普通首页链接</SmartNavHashLink>

常见踩坑提醒 #

React Router v6 以上版本已经移除了所有导航类组件的activeClassName属性，如果升级版本后依然沿用v5的写法，哪怕路径匹配完全正确，激活类名也根本不会生效。

v6版本下的正确激活写法为：

<NavHashLink
  to='/home#bottom'
  // 通过className的回调接收isActive状态，动态拼接激活类名
  className={({ isActive }) => isActive ? 'activelink' : ''}
>带锚点链接</NavHashLink>

这种写法下的匹配逻辑天然仅基于pathname判断，不会被哈希片段干扰，是v6版本下的最优实现。

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