NavLink

여러 개의 메뉴 중 내가 선택한 메뉴에 특정 스타일을 주고 싶을 때 NavLink를 사용하면 쉽게 구현 가능하다.

사용법

URL과 to에 지정한 path가 일치할 때 activeStyle과 activeClassName이 활성화된다.

activeClassName

<NavLink activeClassName='active' to='/home'>
Home
</NavLink>

NavLink 태그의 activeClassName에 URL과 path가 일치할 때 활성화할 class를 적고 해당 class에 원하는 스타일링을 해주면 된다.

activeStyle

<NavLink activeStyle={{fontWeight: "bold"}} to='/home'>
Home
</NavLink>

NavLink 태그의 activeStyle에 URL과 path가 일치할 때 활성화할 style을 작성해 주면 된다.