React Router v6中NavLink如何按URL查询字符串区分激活状态？

问题根源 #

• React Router v6 的 NavLink 默认仅匹配 URL 的路径部分，不会考虑查询参数，因此所有指向同一路径、仅查询参数不同的链接都会被标记为激活状态。
• 你之前用 props.to（查询字符串）和 location.pathname（路径部分）做对比是逻辑错误，两者不属于同一维度，自然永远返回 false，无法正确分配激活类。

解决方案 #

方法一：自定义 isActive 判断函数（推荐） #

利用 useLocation 获取当前 URL 的查询参数，自定义激活判断逻辑，覆盖 NavLink 的默认匹配规则：

import { NavLink, useLocation } from 'react-router-dom';

function ProductFilters() {
  const location = useLocation();

  // 自定义激活判断：对比type查询参数
  const isLinkActive = (targetQuery) => {
    const currentParams = new URLSearchParams(location.search);
    const targetParams = new URLSearchParams(targetQuery);
    return currentParams.get('type') === targetParams.get('type');
  };

  return (
    <ul>
      <li>
        <NavLink
          to="?type=all"
          isActive={() => isLinkActive("?type=all")}
        >
          all
        </NavLink>
      </li>
      <li>
        <NavLink
          to="?type=asdf"
          isActive={() => isLinkActive("?type=asdf")}
        >
          asdf
        </NavLink>
      </li>
      <li>
        <NavLink
          to="?type=1234"
          isActive={() => isLinkActive("?type=1234")}
        >
          1234
        </NavLink>
      </li>
    </ul>
  );
}

方法二：手动控制激活类名 #

使用 useSearchParams 直接获取当前查询参数，手动为匹配的 NavLink 添加激活类：

import { NavLink, useSearchParams } from 'react-router-dom';

function ProductFilters() {
  const [searchParams] = useSearchParams();
  // 默认type为all时激活
  const currentType = searchParams.get('type') || 'all';

  return (
    <ul>
      <li>
        <NavLink
          to="?type=all"
          className={currentType === 'all' ? 'active' : ''}
        >
          all
        </NavLink>
      </li>
      <li>
        <NavLink
          to="?type=asdf"
          className={currentType === 'asdf' ? 'active' : ''}
        >
          asdf
        </NavLink>
      </li>
      <li>
        <NavLink
          to="?type=1234"
          className={currentType === '1234' ? 'active' : ''}
        >
          1234
        </NavLink>
      </li>
    </ul>
  );
}

注意事项 #

• 不需要再使用 end 属性，该属性用于控制路径的精确匹配，和查询参数无关，反而可能干扰自定义判断逻辑。
• 如果需要匹配多个查询参数，可以扩展 isLinkActive 函数，对比所有需要的参数项。

内容的提问来源于stack exchange，提问作者Carl.t_