[React] React-Router-DOM 현재 선택된 메뉴 표시하기 (NavLink)

React-Router-DOM의 <Link> 컴포넌트를 내비게이션 메뉴에서 사용하는 경우, 

현재 페이지를 표시해주기 위해 따로 스타일을 주는 경우가 많다. 

 

예)

Menu1    Menu2    Menu3

 

이럴 때 <Link> 대신 <NavLink>를 사용하면 

activeClassName 속성을 사용해 현재 선택된 메뉴에만 클래스 이름을 추가해 스타일링을 쉽게 할 수 있다. 

 

css

.active {
	color: red;
	font-weight: bold;
}

 

jsx

<NavLink to="/menu1" activeClassName="active">Menu1</NavLink>
<NavLink to="/menu2" activeClassName="active">Menu2</NavLink>
<NavLink to="/menu3" activeClassName="active">Menu3</NavLink>

 

html

<a href="/menu1" class="active">Menu1</a>
<a href="/menu2">Menu2</a>
<a href="/menu3">Menu3</a>

 

 

Reference : 

https://github.com/remix-run/react-router/blob/1cf5f7e938ea4d5cff23ce88f9f952f0a343b7a0/docs/getting-started/tutorial.md

GitHub - remix-run/react-router: Declarative routing for React

react-router 튜토리얼 Active Links 부분