Use 'active' state from React Router in Styled Components

Question

React Router adds an active class to NavLinks when you are on the page that they link to. How can I access this property with Styled Components. I need to styled menu items differently when you are on their page.

const LinkElem = styled(NavLink)`
  font-size: 16px;
  font-weight: 400;

  ${props => console.log(props)};

  &:hover {
    color: ${props => props.theme.colorOrange};
  }
`;

const Menu = props => {
  const { me } = props;
  return (
    <MenuElem>
      <li>
        {me ? (
          <LinkElem to="/account">Account</LinkElem>
        ) : (
          <LinkElem to="/login">Log in / sign up</LinkElem>
        )}
      </li>
    </MenuElem>
  );
};

Answer 1

The prop className is getting added to the children of NavLink and so its not accessible at NavLink level. The docs were not clear about this. Therefore, we cannot check for props.className === 'active' and add styles.

Instead, you could just resort to css inside styled components for your use:

  const LinkElem = styled(NavLink)`
  // example style
  &.active {
    color: ${props => props.theme.orange }
  }
`;

Answer 2

As of react-router v4, you can style the active state of NavLink without any dependencies using activeClassName and Styled Components' attrs() function:

export const StyledNavLink = styled(NavLink).attrs({
  activeClassName,
})`

  &.${activeClassName} {
    background: red;
  }
`;

Related documentation:

• activeClassName
• attrs()