React Router的NavLink如何区分带锚点与不带锚点的激活路由？

问题根源在于React Router的NavLink默认匹配逻辑：它会将包含当前路径前缀的链接都标记为激活状态。当访问/about#contact时，/about是它的路径前缀，因此两个NavLink的isActive都会返回true，导致同时激活。

以下是两种实用的解决方式：

方式一：使用end属性 #

给指向/about的NavLink添加end属性，强制要求路径完全匹配才会激活，不会匹配带锚点的子路径。

修改后的代码：

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

export default function Nav() {
  let activeStyle = {
    textDecoration: "underline",
  };

  return(
    <nav>
      <ul>
        <li>
          <NavLink to="/" style={({isActive}) => isActive ? activeStyle : undefined} end>
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" style={({isActive}) => isActive ? activeStyle : undefined} end>
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/about#contact" style={({isActive}) => isActive ? activeStyle : undefined}>
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

补充：给Home的NavLink也加上end，可以避免访问其他子路径时Home被误激活。

方式二：自定义isActive判断逻辑 #

如果需要更灵活的控制，可以手动编写判断逻辑，忽略URL中的锚点部分，只比较路径是否完全匹配。

示例代码：

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

export default function Nav() {
  const location = useLocation();
  let activeStyle = {
    textDecoration: "underline",
  };

  // 自定义判断：去掉锚点后比较路径是否完全相等
  const isExactMatch = (path) => {
    return location.pathname === path;
  };

  return(
    <nav>
      <ul>
        <li>
          <NavLink 
            to="/" 
            style={() => isExactMatch("/") ? activeStyle : undefined}
          >
            Home
          </NavLink>
        </li>
        <li>
          <NavLink 
            to="/about" 
            style={() => isExactMatch("/about") ? activeStyle : undefined}
          >
            About
          </NavLink>
        </li>
        <li>
          <NavLink 
            to="/about#contact" 
            style={() => location.href.includes("/about#contact") ? activeStyle : undefined}
          >
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

这里通过useLocation获取当前路由信息，对Contact链接直接判断完整URL是否包含目标锚点，确保只有锚点匹配时才激活。

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