React_58_NavLink

지원·2023년 11월 23일

React

목록 보기
59/71
post-thumbnail

NavLink는 메뉴에서 사용하는 링크
NavLink는 Link와 마찬가지로 사용할 수 있지만
style이라는 prop으로 함수를 지정해 줄 수 있다.

getLinkStyle이라는 함수를 내려준다.

getLinkStyle함수에서 파라미터로는 객체를 받는데
객체의 프로퍼티는 isActive라는 Boolean형이 있다.

현재 페이지의 경로가 네비게이션에 링크에 해당하면
이 값이 참이된다.

이 함수에서는 리액트 인라인스타일 객체를 return하면된다.

textDecoration이라는 css속성에다가
isActive가 참일 때만 'underline'으로 밑줄을 보여줄 것이다.

이렇게 하면 카탈로그 페이지에서는 카탈로그 메뉴에 밑줄이 생긴다.
확인해보면 페이지를 이동할 때마다 밑줄이 생기는 것을 확인할 수 있다.

0개의 댓글