React) react-router-dom : NavLink 로 활성화된 버튼 active style 적용하기

react-router-dom : NavLink 

---

react-router-dom을 이용할 때, to attribute에 설정된 path로 이동시켜주는 Link는 css 가상선택자로 스타일을 적용할 수 없어서 그냥 정적인 스타일로 두었습니다.

그런데 NavLink를 사용하면 active에 적용되는 스타일을 따로 적용할 수있게 됩니다. 

 

• How to use

 

우선 react-router-dom 모듈에서 NavLink를 임포트 합니다.

import { NavLink } from 'react-router-dom';

그리고 active 된 링크에 적용할 스타일을 정의합니다. 

const activeStyle= {
        background: 'grey',
        color: 'white'
}

정의한 스타일을 NavLink의 activeStyle attribute에 전달하면 됩니다. 

 <NavLink activeStyle={activeStyle} to='/pathname'>Link Button</NavLink>

---

References

• 리액트를 다루는 기술 (김민준)