- 리액트 프로젝트에서 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; 를 설정할 수 있다.