Reactjs中激活Nav-Item实现高亮，Reactstrap侧边栏activeClassName不生效问题

解决方案 #

情况1：使用react-router-dom v6及以上版本

v6版本已经移除了activeClassName属性，改为通过className的回调函数接收isActive状态判断激活样式：

<NavLink 
  to="/faq" 
  className={({ isActive }) => isActive ? "selected" : ""}
>
  FAQs
</NavLink>

情况2：单独使用reactstrap的NavLink（未接入react-router）

需要自行管理激活状态，配合useState控制对应导航项的active属性和自定义类名：

import { useState } from 'react';
import { Nav, NavItem, NavLink } from 'reactstrap';

function Sidebar() {
  // 存储当前激活的导航路径
  const [activePath, setActivePath] = useState('/faq');

  return (
    <Nav vertical>
      <NavItem>
        <NavLink 
          href="/faq" 
          active={activePath === '/faq'}
          onClick={() => setActivePath('/faq')}
          className={activePath === '/faq' ? 'selected' : ''}
        >
          FAQs
        </NavLink>
      </NavItem>
      {/* 其余导航项按照相同逻辑添加即可 */}
    </Nav>
  )
}

情况3：同时使用reactstrap和react-router

需要通过tag属性将react-router的NavLink绑定到reactstrap的NavLink组件上，同时保留激活状态判断逻辑：

import { NavLink as RouterNavLink } from 'react-router-dom';
import { Nav, NavItem, NavLink } from 'reactstrap';

<NavItem>
  <NavLink 
    tag={RouterNavLink} 
    to="/faq"
    className={({ isActive }) => isActive ? 'selected' : ''}
  >
    FAQs
  </NavLink>
</NavItem>

样式优先级注意 #

确保自定义的selected类样式优先级高于reactstrap默认的导航项样式，避免样式不生效，可以给选择器增加权重：

/* 增加选择器权重避免被默认样式覆盖 */
.nav-link.selected {
  background-color: #你需要的背景色值;
  color: #你需要的文字色值;
}

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