React开发中NavLink的activeClassName使用问题求助

嘿，我完全懂你遇到的困扰！当使用React Router的NavLink时，默认的匹配逻辑是部分匹配——这就导致当你访问/icons/docs/或者/icons/tutorial/时，父路由/icons/也会被标记为活跃状态，两个导航项同时高亮，这显然不是你想要的效果。

下面给你两个实用的解决方案，根据你的需求选就行：

方案一：使用exact属性（最简单直接） #

exact属性会让NavLink只有在路径完全匹配的时候才会激活activeClassName。刚好适合你的场景，给根路由加上这个属性就搞定了：

import React from 'react';
import { NavLink } from 'react-router-dom';
import styles from './Header.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

const Header = () => (
  <div className={cx('header')}>
    <nav>
      {/* 给/icons/路由添加exact，确保只有访问该路径时才激活 */}
      <NavLink
        to="/icons/"
        exact
        className={cx('nav-link')}
        activeClassName={cx('nav-link--active')}
      >
        Icons 首页
      </NavLink>
      <NavLink
        to="/icons/docs/"
        className={cx('nav-link')}
        activeClassName={cx('nav-link--active')}
      >
        文档
      </NavLink>
      <NavLink
        to="/icons/tutorial/"
        className={cx('nav-link')}
        activeClassName={cx('nav-link--active')}
      >
        教程
      </NavLink>
    </nav>
  </div>
);

export default Header;

这个方案适合你不需要父路由在子路由页面保持高亮的情况，配置起来最省心。

方案二：自定义isActive函数（更灵活） #

如果你有更复杂的匹配需求（比如想让父路由在子路由页面也保持高亮，或者需要自定义匹配规则），可以用isActive函数来手动控制激活状态：

<NavLink
  to="/icons/"
  className={cx('nav-link')}
  activeClassName={cx('nav-link--active')}
  isActive={(match, location) => {
    // 这里自定义判断逻辑：只有当路径完全是/icons/时才激活
    return location.pathname === '/icons/';
    
    // 如果想让父路由在所有子路由页面都保持高亮，可以改成：
    // return location.pathname.startsWith('/icons/');
  }}
>
  Icons 首页
</NavLink>

isActive函数接收两个参数：match是当前路由的匹配结果，location是当前的路由对象，你可以根据业务需求自由编写判断逻辑。

另外要注意：确保to属性的路径和你实际的URL结构一致（比如末尾的斜杠/），避免因为路径格式不一致导致的匹配问题。

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