[react-router-dom@5] styled-components,emotion에 activeClassName 적용 방법.

const MainHeader = () => {
  return (
    <header className={classes.header}>
      <nav>
        <ul>
          {/* a tag를 사용하면 새 페이지를 로드하기 위해 HTML 파일을 실행마다 요청한다.
          Link를 사용하면 내부 라우터에 반응하면서 브라우저의 현재 상태를 유지하면서
          URL을 수동으로 업데이트한다. 그래서 페이지를 전환하면 화면에 표시되는 내용도 바뀌는 것처럼 보이게 된다.*/}
        
          <li>
           {/* NavLink. NavLink는 기본적으로 표준 링크처럼 작동한다. 또한 활성 항목에 css class를 설정한다.
          추가할 class를 NavLink에 알려주기만 하면 되는데 activeClassName prop을 추가하면 된다.
          */}
            <StyledNavLink activeClassName="anyword" to="/welcome">Welcome</StyledNavLink>
          </li>
          <li>
            <StyledNavLink activeClassName="stringistruthy" to="/products">Products</StyledNavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default MainHeader;

styled-components & emotion/styled

//Style-components와 emotion을 쓴다면 activeClassName을 props로 전달하여 사용할 수도 있다.
const StyledNavLink = styled(NavLink)`

  &.${props => props.activeClassName}{
  color: #95bcf0;
  padding-bottom:  0.25rem;
  border-bottom:  4px solid #95bcf0;
  }
`