如何在 NavLink 样式的组件上制作 activeClass

Question

大家好，我在活动链接方面遇到了麻烦，我使用样式组件。我希望当我处于活动链接时我的链接为红色，但没有任何效果。我尝试了 ActiveCLassName 但这也不起作用。

有人能帮我吗？

多谢

const NavLink = styled(Link)`
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;
`;

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

Answer 1

问题

我看到的问题是您正在设计Link组件而不是NavLink组件的样式。该Link组件不需要任何额外的属性来处理活动链接。

解决方案

该NavLink组件默认使用一个.active类，因此您不需要任何特殊的类名，您应该使用此类。

例子：

import { NavLink as BaseNavLink } from "react-router-dom";

const NavLink = styled(BaseNavLink)`
  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 {
    .... your active CSS rules here
  }
`;

已在 RRDv5 和 RRDv6 中测试并工作。

RRDv5	RRDv6
“/饮料”	“/汉堡”