React Router Dom V6 변경점-NavLink

 

리액트 라우터의 Link와 NavLink는 둘 다 새로고침 없이 URL을 변경해주는 역할을 한다.

그 중 NavLink는 해당하는 링크에서 스타일과 같은 특성을 바꿀 수 있게 해준다.

 

예를 들면 홈 화면에서는 이런 메뉴바가

 

 

News를 선택하면 그 부분의 스타일만 변경된다.

 

 

이런 NavLink도 리액트 라우터 돔이 V5 => V6로 업그레이드 되면서 변경점이 있다.

 

1. activeClassName, activeStyle 삭제

 

activeClassName과 activeStyle은 해당하는 NavLink가 선택되었을 때 알아서 클래스명을 추가하거나 스타일을 활성화하는 기능이다.

하지만 리액트 라우터가 V6로 올라오면서 삭제되었다.

따라서 다른 방식으로 클래스를 추가해 주어야한다.

 

• className

// V5
<NavLink
  to="tasks"
  activeClassName='selected'
>
Tasks
</NavLink>

// V6
// 삼항연산자로 selected라는 클래스를 직접 추가해줘야한다.
<NavLink
  to="tasks"
  className={({ isActive }) =>
    isActive ? 'selected' : ''
  }
>
Tasks
</NavLink>

 

• style

// V5
<NavLink
  to="messages"
  activeStyle={{ color: 'green' }}
>
Messages
</NavLink>

// V6
// 마찬가지로 삼항 연산자를 사용해서 스타일을 지정해줘야한다.
<NavLink
  to="messages"
  style={({ isActive }) => 
    ({ color: isActive ? 'orange' : 'black' })
  }
>
Messages
</NavLink>