ReactJS导航栏isActive异常：当前页标记方块重复显示

问题描述 #

开发ReactJS导航栏时，期望通过链接下方的旋转方块标记当前页面，但出现异常：方块始终保留在“Home”页下方，点击其他链接（如“About”）时，该链接下方会出现方块，但“Home”下方的方块不会消失。

现有代码 #

Navbar组件（.jsx）

import {Link, NavLink} from 'react-router-dom'

import './navbar.css'
import {links} from '../data'
import {GoThreeBars} from 'react-icons/go'
import Logo from '../images/example-logo.png'


const Navbar = () => {
  return (
    <nav>
        <div className='container nav__container'>
            <Link to='/' className='logo'>
                <img src={Logo} alt="Nav logo" />
            </Link>
            <ul className='nav__links'>
                {
                    links.map(({name, path}, index) => {
                        return (
                            <li>
                                <NavLink to={path} className={({isActive}) => isActive ? 'active-nav': ''} >{name}</NavLink>
                            </li>
                        )
                    })
                }
            </ul>
            <button className='nav__toggle-btn'>
                <GoThreeBars/>
            </button>
        </div>
    </nav>
  )
}

export default Navbar

样式代码（.css）

nav {
    height: 5rem;
    width: 100vw;
    background:var(--color-primary);
    display: grid;
    place-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

.nav__toggle-btn {
    display: none;
}

.nav__container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    width: 5%;
}

.nav__links {
    display: flex;
    gap: 3.5rem;
    align-items: center;
}

.nav__links a {
    transition: var(--transition);
}

.nav__links a:hover {
    color: var(--color-secondary);
}

.active-nav {
    position: relative;
}

.active-nav::after {
    content: '';
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--color-primary);
    position: absolute;
    left: calc(50% - 0.6rem);
    transform: rotate(45deg);
    margin-top: 0.9rem;
}

问题原因 #

React Router的NavLink默认采用前缀匹配规则：当当前路径以to属性的路径开头时，isActive就会返回true。比如Home的路径是/，当跳转至/about时，/是/about的前缀，因此Home的isActive始终为true，导致active-nav类无法被移除。

解决方案 #

方案1：使用end属性实现完全匹配 #

在NavLink上添加end属性，仅当路径完全匹配时才激活状态：

<NavLink to={path} end className={({isActive}) => isActive ? 'active-nav': ''} >{name}</NavLink>

方案2：自定义isActive函数 #

如果需要更灵活的匹配逻辑，可以手动指定isActive函数，判断是否为完全匹配：

<NavLink 
  to={path} 
  className={({isActive}) => isActive ? 'active-nav': ''}
  isActive={(match, location) => {
    // 仅当路径完全匹配时返回true
    return match?.isExact;
  }}
>{name}</NavLink>

效果验证 #

修改后，点击其他页面链接时，Home的active-nav类会被移除，对应方块消失，仅当前页面的链接下方显示标记方块。

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