리액트 router의 activeClassname에 관한 팁.

react-router의 NavLink와 activeClssName에 관하여.

react-router에서는 다양한 기능을 제공한다.

그중NavLink와 activeClassame에 대해 간단하게 알아보자.

NavLink는 link와는 다르게 스타일을 바꾸거나 클래스를 활용할 수 있다.

<NavLink activeStyle=”{css}” to=”/라우팅 할 주소”>할 형식으로

라우팅할 주소의 css를 바꿀 수 있다.

activeClassName는 class를 활용하는 방법으로 다양하게 이용될 수 있다.

<NavLink activeClassName=”{classname}” to=”/라우팅 할 주소”>형식으로 사용되며 style도 좀더 동적으로 바꿀 수 있다.

styled-component를 이용하여 간단한 예를 들어보자

localhost:3000/next

ex) const menu=styled.div`

width:50px;

height:50px;

$ .selected{

background:red;

}

<menu>메뉴1<menu>

<menu><NavLink activeClassName={‘selected’} to=’/next’>메뉴2<menu>

<menu>메뉴3<menu>

이런 형식으로 to로 링크 될 시 메뉴2의 background컬러만 변경되어

있음을 알 수 있다.