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

I have designed my NavLinks using the styled-components. I want to add an active class to the active link I am unable to do it. I tried the isActive property but it did not work, I also tried the activeClassName property but it did not work either. Please suggest to me what should I do to get an active class on the active links with styled components. I am currently using ReactJs version ^18.1.0 and 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``;

Solution 1:^[1]

NavLink has a default class for active routue. Simply go to your index.css/app.css and add a class name (.active) and give your styles. If you are using tailwind then simply add this style.

@tailwind components;

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

Solution 2:^[2]

Do not directly style the NavLink. Add a child component to NavLink such as <p> and add styles to it. Then use activeClassName property of NavLink to add active class to it.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Razib Saha
Solution 2	Fahad Ashraf

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]