문제 상황

리액트로 프로젝트를 진행하다보면 react-router-dom을 사용하는 경우가 많다.
그 중, NavLink는 해당 주소에 접근 중이면 특정 효과를 넣을 수 있게 해주는 기능이 있다.
v6에서는 어떻게 적용할 수 있는지 알아보자!

적용

<NavLink
  to={item.route}
  className={({ isActive }) =>
    isActive ? "py-1 border-b-2 border-black" : ""
  }
>

isActive를 사용하면 된다.
to에 있는 주소에 접속해 있다면 NavLink의 isActive가 true가 된다.
따라서 위와 같은 삼항연산자를 통해서 스타일을 적용할 수 있는 것이다!
참고로, 필자는 Tailwind css를 사용해서 className으로 스타일을 적용 중이다.

참고 문서

참고 자료 1
react-router-dom 공식 문서