ReactJS中实现按钮随当前页面切换颜色的方法求助

云原生阿岚

2026-7-16

React Router 实现导航按钮随当前页面切换样式

你的问题出在只用了一个state控制两个按钮的样式，导致点击时两个按钮同步切换颜色。正确的做法是根据当前路由路径动态判断每个按钮的样式，而非手动切换state。

实现步骤：

引入React Router的useLocation钩子，用于获取当前页面的路由路径
移除原有的btnClass状态和toggleColor函数，无需手动控制样式切换
给每个按钮根据当前路径动态设置对应样式类

完整代码示例：

import { Routes, Route, useNavigate, useLocation } from 'react-router-dom';
import Home from './Home';
import About from './About';

function Navbar() {
  const navigate = useNavigate();
  const location = useLocation(); // 获取当前路由路径

  const navigateHome = () => navigate('/');
  const navigateToAbout = () => navigate('/about');

  return (
    <div>
      <nav className="nav">
        {/* Home按钮：当前路径为/时用蓝色样式，否则用橙色 */}
        <button
          onClick={navigateHome}
          className={`${location.pathname === '/' ? 'blue-color' : 'orange-color'} po-btn`}
        >Home</button>
        {/* About按钮：当前路径为/about时用蓝色样式，否则用橙色 */}
        <button
          onClick={navigateToAbout}
          className={`${location.pathname === '/about' ? 'blue-color' : 'orange-color'} pr-btn`}
        >About</button>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </nav>
    </div>
  );
}

export default Navbar;