如何在Styled Component中为NavLink设置激活样式（activeClass）

你的问题可以通过两处关键修改解决：

1. 基于NavLink创建样式组件 #

你当前用的是styled(Link)，但普通Link不具备激活状态的检测逻辑，必须替换成react-router-dom提供的NavLink：

// 先导入正确的NavLink
import { NavLink } from 'react-router-dom';

// 用NavLink创建样式化组件
const StyledNavLink = styled(NavLink)`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  list-style-type: none;
  text-decoration: none;
  color: black;
  background-color: yellow;
  border: 0.1px solid lightgrey;

  // 添加激活状态的样式
  &.active {
    color: red;
    // 可额外添加其他激活样式，比如边框变色
    border-color: red;
  }
`;

2. 修正每个链接的to属性 #

你代码里所有链接的to都设为/Burgers，这会导致所有链接同时处于激活状态，需要给每个链接设置对应路径：

export default function Nav() {
  return (
    <NavWrapper>
      <UlNav>
        <LiNav>
          <StyledNavLink to="/Burgers">Burgers</StyledNavLink>
        </LiNav>
        <LiNav>
          <StyledNavLink to="/Pizza">Pizza</StyledNavLink>
        </LiNav>
        <LiNav>
          <StyledNavLink to="/Drinks">Drinks</StyledNavLink>
        </LiNav>
      </UlNav>
    </NavWrapper>
  );
};

可选：自定义激活类名 #

如果不想用默认的active类名，可通过attrs指定自定义类名：

const StyledNavLink = styled(NavLink).attrs({
  activeClassName: 'nav-active'
})`
  // 基础样式...

  &.nav-active {
    color: red;
  }
`;

完成以上修改后，当前路由匹配的链接就会显示红色激活样式了。

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