React应用中如何实现导航栏按钮在对应路由激活时设置Active状态并切换SVG按钮颜色

阿华AIGC实验室

2026-5-6

解决方案：路由激活时导航按钮状态保持与SVG变色

刚好我之前也遇到过类似的问题，结合React Router和styled-components给你两个靠谱的解决方案：

一、核心思路：绑定当前路由路径判断激活状态

首先要明确：导航按钮的激活状态必须和当前路由路径绑定，而不是依赖focus这类临时交互状态（focus会在焦点移走后消失，没法持久保持）。我们可以通过React Router提供的工具获取当前路由，再给匹配的按钮应用激活样式。

二、方案1：用React Router的`NavLink`组件（最省心）

NavLink是React Router专门为导航链接设计的组件，它会自动给匹配当前路由的元素加上active类名，完美适配你的场景：

步骤1：创建样式化的NavLink

import { NavLink } from 'react-router-dom';
import styled from 'styled-components';

const StyledNavItem = styled(NavLink)`
  /* 未激活状态的基础样式 */
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  color: #888; /* 未激活的文字/图标颜色 */
  svg {
    fill: #888;
    width: 24px;
    height: 24px;
  }

  /* 激活状态样式（NavLink自动添加.active类） */
  &.active {
    color: blue; /* 激活后的颜色 */
    svg {
      fill: blue;
    }
  }

  /* 你的hover样式保留 */
  &:hover {
    color: #555;
    svg {
      fill: #555;
    }
  }

  /* 去掉默认链接的下划线 */
  text-decoration: none;
`;

步骤2：使用组件

// 假设你的路由是/settings和/profile
<StyledNavItem to="/settings" end>
  <SettingsSVG /> {/* 你的设置图标SVG组件 */}
</StyledNavItem>

<StyledNavItem to="/profile" end>
  <ProfileSVG /> {/* 你的个人资料图标SVG组件 */}
</StyledNavItem>

注意end属性：它是精确匹配开关，确保只有当路径完全等于/settings时才激活，避免/settings/edit这类子路由也触发激活状态。

三、方案2：手动通过`useLocation`判断（适合自定义按钮）

如果你的导航是自定义按钮（比如需要在onClick里做额外逻辑，而不是单纯的路由跳转），可以用useLocation手动获取当前路径，再给按钮传递isActive状态：

步骤1：获取当前路由

import { useLocation, useNavigate } from 'react-router-dom';
import styled from 'styled-components';

const NavBar = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const currentPath = location.pathname;

  // ...其他逻辑
};

步骤2：创建带激活状态的按钮组件

const NavButton = styled.button`
  /* 基础样式和hover样式 */
  border: none;
  background: transparent;
  padding: 8px 16px;
  color: #888;
  svg {
    fill: #888;
    width: 24px;
    height: 24px;
  }

  &:hover {
    color: #555;
    svg {
      fill: #555;
    }
  }

  /* 根据isActive prop切换激活样式 */
  ${props => props.isActive && `
    color: blue;
    svg {
      fill: blue;
    }
  `}
`;

步骤3：使用按钮

<NavButton 
  isActive={currentPath === '/settings'}
  onClick={() => navigate('/settings')}
>
  <SettingsSVG />
</NavButton>

<NavButton 
  isActive={currentPath === '/profile'}
  onClick={() => navigate('/profile')}
>
  <ProfileSVG />
</NavButton>