NavLink

react에서 router를 처리할 때 Link를 자주 사용한다.

그런데 Link 태그를 사용하여 메뉴를 만들 경우

활성화된 메뉴의 스타일 속성을 적용해주기 위해선 별도의 처리가 필요하다.

하지만 NavLink는 별도의 처리 없이 활성화된 메뉴의 스타일 속성을 지정해줄 수 있다.

NavLink

< 공식문서 >
NavLink 는 Link의 특별한 버전입니다.
현재 URL과 클릭시 이동할 URL이 같을 경우, "style 속성" 을 추가해주는 기능을 가지고 있습니다.
스타일 외에도 추가 기능으로 선택된 NavLink의 경우 aria-current="page" 로 지정되어, 접근성에 도움이 됩니다.

활용 예시

1) activeStyle: object

<NavLink
	to="/URL"
	activeStyle={{
    	'CSS 추가'
	}}
>
  asd
</NavLink>

2) isActive: function

<NavLink
	to="/URL"
	className: {((isActive) => {
    	isActive ? '활성화 시 CSS 추가' : '비활성화 시 CSS 추가'
    })}
>
  asd
</NavLink>