React NavLink에서 activeClassName이 사라졌다.

오랜만에 NavLink를 사용하다가 오류를 마주치며.. 이전에 알던 것과 다른 정보를 보게되어 정리한다.

리액트 라우터 공식 문서

By default, an active class is added to a component when it is active. This provides the same simple styling mechanism for most users who are upgrading from v5. One difference as of v6.0.0-beta.3 is that activeClassName and activeStyle have been removed from NavLinkProps. Instead, you can pass a function to either style or className that will allow you to customize the inline styling or the class string based on the component's active state. You can also pass a function as children to customize the content of the component based on their active state, specially useful to change styles on internal elements.

...그렇다고 한다.

원래는 activeClassName="원하는 클래스"로 지정이 가능했는데, 이 기능이 사라졌다고 한다. 이제는 이제는 isActive 라는 것을 사용해서 className 을 설정해야 한다.

사용 예시

 <NavLink
            to="messages"
            style={({ isActive }) =>
              isActive ? activeStyle : undefined
            }
          >
            Messages
          </NavLink>

개인적으로 activeClassName이 더 편했는데, 왜 삭제한 것인지 잘 모르겠다 ㅜㅜ