How to highlight active nav link on click with Styled components and react-router-dom v6

Question

I m new to react and I want my hover style stay active while the current Page is open.I need to make a condition but don't know how

const StyledLi = styled.li`
      `list-style: none;
      display: flex;

      &:hover {
        background-color: rgba(84, 78, 114, 1);
        border-radius: 10px 0px 0px 10px;//enter code here
      }
        background-color: ${props => props.path ? "rgba(84, 78, 114, 1)" : "white"};
      border-radius: ${props => props.path ? "0px 0px 0px 10px" : "0px"};
    ; 

    const SidebarMenu = () => {
        const location = useLocation();
        let path;
        const toHandler = (route) => (path = route);
    
        return (
            <StyledAside>
                <StyledUl>
                    <StyledLi>
                          <NavLink style={navLinkStyles} to={toHandler("/dashboard/main")}>
                            {location.pathname === path ? <StyledIcon url={homePageYellowIcon}/> : <StyledIcon url={homePageIcon}/>}
                            <span>Главная</span> 
                        </NavLink>
                    </StyledLi>
        );
    };

Answer 1

You can reference other styled components. Import the Navlink and create a styled-component from it so it can be referenced within the StyledLi component.

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

const NavLink = styled(BaseNavLink)`
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 3px;
  width: 100%;

  &.active {
    color: #f8dc2f;
  }
`;

Now also apply the hover style when the nested NavLink component has an active "active" classname.

const StyledLi = styled.li`
  list-style: none;
  display: flex;

  &:hover,
  ${NavLink}.active {
    background-color: rgba(84, 78, 114, 1);
    border-radius: 10px 0px 0px 10px;
  }
  background-color: ${(props) =>
    props.path ? "rgba(84, 78, 114, 1)" : "white"};
  border-radius: ${(props) => (props.path ? "0px 0px 0px 10px" : "0px")};
`;

Styling the NavLink

Here is the same thing but styling the NavLink.

const NavLink = styled(BaseNavLink)`
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #888;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 3px;
  width: 100%;

  &:hover,
  &.active {
    background-color: rgba(84, 78, 114, 1);
    border-radius: 10px 0px 0px 10px;
  }

  &.active {
    color: #f8dc2f;
  }
`;

const StyledLi = styled.li`
  list-style: none;
  display: flex;
  background-color: ${(props) =>
    props.path ? "rgba(84, 78, 114, 1)" : "white"};
  border-radius: ${(props) => (props.path ? "0px 0px 0px 10px" : "0px")};
`;