React导航栏激活链接文本颜色修改失败，请求排查帮助

我尝试根据当前页面路径给导航栏对应链接添加激活状态并修改文本颜色，但颜色始终无法改变，怀疑是CSS选择器或代码逻辑问题，求解决。

导航栏组件代码 #

function NavBar() {
  return (
    <>
      <nav className="navbar navbar-expand-lg">
        <a className="navbar-brand" href="#">BadBank</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            <li className={`nav-item ${location.pathname === '/home/' ? 'active' : ''}`}>
              <a className="nav-link" href="#/home/" title="Home" >Home</a>
            </li>
            <li className={`nav-item ${location.pathname === '/createaccount/' ? 'active' : ''}`}>
              <a className="nav-link" href="#/createaccount/" title="Create a new account" >Create Account</a>
            </li>
            <li className={`nav-item ${location.pathname === '/deposit/' ? 'active' : ''}`}>
              <a className="nav-link" href="#/deposit/" title="Deposit money" >Deposit</a>
            </li>
            <li className={`nav-item ${location.pathname === '/withdraw/' ? 'active' : ''}`}>
              <a className="nav-link" href="#/withdraw/" title="Withdraw money" >Withdraw</a>
            </li>
            <li className={`nav-item ${location.pathname === '/balance/' ? 'active' : ''}`}>
              <a className="nav-link" href="#/balance/" title="View balance" >Balance</a>
            </li>
            <li className={`nav-item ${location.pathname === '/alldata/' ? 'active' : ''}`}>
              <a className="nav-link" href="#/alldata/" title="View all data" >All Data</a>
            </li>
            <li className={`nav-item ${location.pathname === '/login/' ? '-active' : ''}`}>
              <a className="nav-link" href="#/login/" title="Login here" >Login</a>
            </li>          
          </ul>
        </div>
      </nav>
      ${console.log(location.pathname)}
    </>
  );
}

样式代码 #

.navbar {
    background-color: #F39428;
}

.navbar-nav .nav-link{
    color:azure;
}

.navbar-nav .nav-item-active .nav-link
{
    color: blue !important;
}

.navbar .navbar-brand {
    font-weight: 800;
    color:azure;
}

问题修复方案 #

1. 修正CSS选择器匹配错误

你的JS代码中，激活状态的<li>会添加active类，最终结构为<li class="nav-item active">，但原CSS选择器.nav-item-active是在匹配一个名为nav-item-active的独立类，而非nav-item下的active类。修改后的CSS选择器：

.navbar-nav .nav-item.active .nav-link {
    color: blue !important;
}

2. 修正Login项的类名错误

Login对应的<li>中，激活类写为-active，多了一个减号，导致路径匹配时无法添加正确的激活类：

<li className={`nav-item ${location.pathname === '/login/' ? 'active' : ''}`}>
  <a className="nav-link" href="#/login/" title="Login here" >Login</a>
</li>

3. （React Router场景）修正location获取方式

如果项目使用React Router，直接调用location会报错，需要引入useLocation钩子：

import { useLocation } from 'react-router-dom';

function NavBar() {
  const location = useLocation(); // 正确获取路由location对象
  
  return (
    // 原有导航栏代码
  );
}

内容的提问来源于stack exchange，提问作者Garrett Fadul CrazyJalapeno123