如何使用样式化组件在 React 路由器 dom v6.3 中将活动 class 添加到活动 Link - ReactJs ^18.1.0

Question

我使用样式组件设计了我的 NavLink。我想添加一个活动 class 到活动 link 我做不到。我尝试了 isActive 属性但它没有用，我也尝试了 activeClassName 属性但它也没有用。请向我建议我应该怎么做才能在带有样式组件的活动 link 上获得活动 class。我目前正在使用 ReactJs 版本 ^18.1.0 和 react-router-dom v6.3.0

NavBar.jsx

import {
  Nav,
  NavLogo,
  NavMenu,
  Navlink,
  LogoutButton,
  RegisterButton,
} from "./NavbarDesktopStyles";

const NavBarDesktop = () => {
  // links that will disappear when user authenticated
  const authLinks = (
    <Fragment>
      <li>
        <RegisterButton to="/">REGISTER</RegisterButton>
      </li>
      <li>
        <Navlink to="/">LOGIN</Navlink>
      </li>
    </Fragment>
  );

  // logout button
  const logout = (
    <Fragment>
      <li>
        <LogoutButton>LOGOUT</LogoutButton>
      </li>
    </Fragment>
  );

  // main navigation
  const mainNavigation = (
    <Fragment>
      <li>
        <Navlink to="/">HOME</Navlink>
      </li>
      <li>
        <Navlink to="/service">SERVICE</Navlink>
      </li>
      <li>
        <Navlink to="/">SUBSCRIPTION</Navlink>
      </li>
      <li>
        <Navlink to="/">ABOUT US</Navlink>
      </li>
      <li>
        <Navlink to="/">CONTACT US</Navlink>
      </li>
    </Fragment>
  );

  return (
    <Nav>
      <NavLogo to="/">
        <img src="/static/images/slvemongramdarkblue.svg" alt="logo" />
      </NavLogo>
      <NavMenu>
        <ul>
          <Fragment>{mainNavigation}</Fragment>
          <Fragment>{authLinks}</Fragment>
        </ul>
      </NavMenu>
    </Nav>
  );
};

export default NavBarDesktop;

NavBarStyleElemets

export const Nav = styled.nav`
  border: 2px solid red;
  height: 5.5rem;
  display: flex;
  padding: 0.5rem 1.5rem;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
`;

export const NavbarContainer = styled.div`
  border: 1px solid blue;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  flex: 1;
`;

export const NavLogo = styled(Link)`
  border: 1px solid green;
  text-decoration: none;

  img {
    width: 4rem;
    height: 4rem;
  }
`;

export const NavMenu = styled.div`
  border: 1px solid blue;
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;

  ul {
    display: flex;
    flex: 1;
    list-style: none;
    align-items: center;
    gap: 2.5rem;

    li:nth-of-type(1) {
      margin-left: auto;
    }
    li:nth-of-type(6) {
      margin-left: auto;
    }
  }
`;

export const Navlink = styled(NavLink)`
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.05rem;
  cursor: pointer;
  position: relative;

  &::after {
    content: "";
    height: 0.125rem;
    background: #1a73e8;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.375rem;
    opacity: 0;
    transform-origin: left center;
    transition: all 270ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transform: scaleX(0);
  }

  &:hover {
    color: #1a73e8;
    &::after {
      transform: scaleX(1);
      opacity: 1;
    }
  }
`;

export const RegisterButton = styled(NavLink)`
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.05rem;
  background-color: #1a73e8;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.62rem;
  transition: 270ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  cursor: pointer;

  &:hover {
    background-color: #135cba;
  }
`;

export const LogoutButton = styled.button``;

Answer 1

不要直接设置 NavLink 的样式。在NavLink中添加一个子组件，例如<p>，并为其添加样式。然后用NavLink的activeClassName属性给它加上activeclass.

<NavLink activeClassName="active" to="/">
    <p class="your-class">Home</p>
<NavLink>

Answer 2

NavLink 具有默认的 class 活动路线。只需转到您的索引。css/app.css 并添加一个 class 名称 (.active) 并提供您的样式。如果您使用顺风，则只需添加此样式。

@tailwind components;

.active {
  @apply border-b-2 border-[#888888] no-underline font-bold text-[#888888];
}

如何使用样式化组件在 React 路由器 dom v6.3 中将活动 class 添加到活动 Link - ReactJs ^18.1.0

How to add an active class to an active Link in react router dom v6.3 using styled components - ReactJs ^18.1.0

javascript

reactjs

styled-components