React.js实现激活页面时导航栏名称与底部边框切换效果

数据老陈

2026-7-31

解决React Router导航栏激活状态持久化问题

你现在用:active伪类只能实现鼠标点击时的临时样式，因为:active是CSS的交互伪类，仅在元素被按下时生效。要实现路由页面激活时导航项样式持久化，需要用React Router提供的NavLink组件替代普通的Link，它会自动根据当前路由匹配状态添加激活类。

步骤1：替换`Link`为`NavLink`

NavLink是React Router专门用于导航的组件，当当前路由与它的to属性匹配时，会自动添加激活类（默认是active，也可以自定义）。修改你的NavBar.js代码：

<div className="icon-tab">
    <NavLink 
        className={({ isActive }) => `icon-name nav-link ${isActive ? 'active' : ''}`} 
        to="/Feed"
    >
        <div>
            <img src="https://cdn-icons-png.flaticon.com/128/1176/1176875.png" alt='FEED TAB' className='icon' width={27} height={27} />
            <div className='icon-name'>FEED</div>
        </div>
    </NavLink>
</div>

如果使用的是React Router旧版本（v5及以下），可以用activeClassName属性简化写法：

<NavLink 
    className="icon-name nav-link" 
    activeClassName="active"
    to="/Feed"
>

步骤2：修改CSS样式

把原来针对:active伪类的样式，改成针对active类的样式，这样当NavLink匹配路由时，样式会持久生效：

.icon-tab {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 90px;
  margin-left: 30px;
  text-align: center;
}

/* 激活状态下的底部边框 */
.icon-tab .active {
  border-bottom: 2px solid #0275b1;
}

.icon-name {
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

/* 激活状态下的文字颜色 */
.icon-tab .active .icon-name {
  color: #0275B1;
}