React Router Dom中NavLink根路径激活样式不消失问题排查

问题原因 #

React Router v6的NavLink默认采用前缀匹配策略，根路径/会匹配所有以/开头的路由（比如/sections、/accounts），因此切换到这些子路由时，根路径的isActive状态仍为true，导致激活样式无法自动取消。

解决方案 #

给根路径的NavLink添加end属性，强制开启精确匹配模式，只有当当前路由与to指定的路径完全一致时，才会应用激活样式。

修改后的代码 #

const SideBar = () => {
    
    const getStyle = (isActive:boolean) => {
        return isActive ? 'activePage' : 'inactive'
    }
    
    return (
        <div className="sidebar-overlay">
            <ul className="sidebar-content">
                <li>
                    <NavLink
                        className={({isActive}) => getStyle(isActive)}
                        to={'/'}
                        end> {/* 添加end属性实现精确匹配 */}
                        <Home/>
                        Главная
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        className={({isActive}) => getStyle(isActive)}
                        to={'/sections'}>
                        <Sections />
                        Отделы
                    </NavLink>
                </li>
                <li>
                    <NavLink
                        className={({isActive}) => getStyle(isActive)}
                        to={'/accounts'}>
                        <Accounts />
                        Учетные записи
                    </NavLink>
                </li>
            </ul>
        </div>
    )
};

版本兼容提示 #

如果使用的是React Router v5版本，需要将end属性替换为exact属性（无需赋值），写法如下：

<NavLink
    className={({isActive}) => getStyle(isActive)}
    to={'/'}
    exact>
    <Home/>
    Главная
</NavLink>

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