[React] NavLink

NavLink

=> NavLink는 nav에서 사용하는 링크로 기존의 link와의 차이점은

스타일프롭으로 함수를 지정할 수 있다는 것!

 

간단하게 웹에서 메뉴를 클릭하면 그 밑에 'active' 효과가 나타나는걸 우리는 자주 볼 수 있다.

style 작업을 해줘도 되지만 ....

 

NavLink를 써보면?

 <NavLink to="/courses" style={getLinkStyle}>카탈로그</NavLink>
 <NavLink to="/questions" style={getLinkStyle}>커뮤니티</NavLink>

navlink로 감싸고 스타일 함수를 만들어서 안에다가 넣을 수도 있다

const getLinkStyle = ({ isActive }) => {
  return {
    textDecoration: isActive ? "underline" : undefined, 
  };
};

 

 

 

 

 

 

간단하게 사용가능!

 

NavLink는 스타일프롭으로 함수를 지정할 수 있다는 것!