Property 'activeClassName' does not exist on type 'IntrinsicAttributes & NavLinkProps & RefAttributes'

NavLink에는  to와 현재 URL이 같으면  Active상태가 true로 해준다. 그래서 손쉽게 active 상태 스타일을 설정해줄 수 있었다. 

이런식으로 설정해주면 to에 해당되는 URL에 있다면 activeClassName안에 클래스가 활성화가 되었다. V5까지는 그런데 이번에 V6가면서 active와 관련된 attribute가 없어졌다고 나와있었다. 그러면 어떻게 쓰는가 찾아봤더니 친절하게 공식 사이트에서 알려주신다. 

 

 

https://reactrouter.com/en/main/components/nav-link

NavLink v6.8.1

 

A <NavLink> is a special kind of <Link> that knows whether or not it is "active". This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers. 

<NavLink> 는 <Link>가 "active" 상태인지 아닌지 알 수 있는 특별한 태그입니다. 'breadcrumb' 유형이나 tab들의 집합같은 네이게이션 메뉴같은 것을 빌딩하고 또 현재 어디탭을 선택되어 있는지 보여줄때 유용합니다. 그리고 화면 판독과 같은 보조기술의 유용한 컨텍스트를 제공합니다. 

By default, an active class is added to a <NavLink> 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 <NavLink> component based on their active state, specially useful to change styles on internal elements.

기본으로, 'active' 클래스는 <NavLink> 컴포넌트가 활성화되었을때 추가됩니다. V5에서 업그레이드하는 대부분의 유저들에게 여전히 같은 간단한 스타일링 메카니즘을 제공합니다. v6부터는 NavLinkProps에서는 이제 'activeClassName'과'activeStyle'이 삭제가 됬다는 차이점이 있습니다. 대신,  컴포넌트의 활성화 상태에 따라 함수를 인라인 스타일링이나 클래스 문자열으로 커스터마이징을 할 수 있게 스타일이나 클래스에 넘겨줄수 있습니다. 그리고 활성화 상태에 따라 함수를 children으로써 NavLink 컴포넌트의 컨텐츠를 커스터마이징을 위해 넘겨줄 수 있습니다 특히 안쪽 요소에 스타일을 바꿀때 용이 할 것입니다. 

 

 

결론적으로는 이렇게 바꿨다. 정상적으로 됨 ㅎ;;