NavLink

• 리액트 프로젝트에서 Link 대신에 NavLink를 사용함으로써, active한 Link에 스타일을 적용시킬 수 있다.
• 이를 통해서, 클릭된 링크의 배경색을 바꾸는 등의 스타일의 적용이 가능하다.

npm install react-router-dom을 통해 설치해 사용한다.

import { NavLink } from 'react-router-dom';

const activeStyle = {
  border : "solid red",
}

<div>
  <NavLink exact to='/' activeStyle={activeStyle}>
  <Button>Home</Button>
  </NavLink>
  <NavLink to='/page1' activeStyle={activeStyle}>
  <Button>페이지1</Button>
  </NavLink>
  <NavLink to='/page2' activeStyle={activeStyle}>
  <Button>페이지2</Button>
  </NavLink>
</div>

• NavLink의 activeStyle속성에 style값을 넣을 수 있다.
• 이를 통해서 현재 경로와 일치하는 NavLink에 스타일을 적용한다.
• CSS 파일에 .active 속성을 설정하면 동일한 효과를 얻을 수 있다.

.active{
  background-color: mediumaquamarine;
}

🥭 Link로 렌더링되는 a태그의 파란색 밑줄을 없애기 위해서 text-decoration: none; 를 설정할 수 있다.