-
[React] React-Router-DOM 현재 선택된 메뉴 표시하기 (NavLink)프론트엔드 2022. 1. 9. 17:57
React-Router-DOM의 <Link> 컴포넌트를 내비게이션 메뉴에서 사용하는 경우,
현재 페이지를 표시해주기 위해 따로 스타일을 주는 경우가 많다.
예)
Menu1 Menu2 Menu3
이럴 때 <Link> 대신 <NavLink>를 사용하면
activeClassName 속성을 사용해 현재 선택된 메뉴에만 클래스 이름을 추가해 스타일링을 쉽게 할 수 있다.
css
.active { color: red; font-weight: bold; }
jsx
<NavLink to="/menu1" activeClassName="active">Menu1</NavLink> <NavLink to="/menu2" activeClassName="active">Menu2</NavLink> <NavLink to="/menu3" activeClassName="active">Menu3</NavLink>
html
<a href="/menu1" class="active">Menu1</a> <a href="/menu2">Menu2</a> <a href="/menu3">Menu3</a>
Reference :
react-router 튜토리얼 Active Links 부분
'프론트엔드' 카테고리의 다른 글
[반응형 웹] 어떤 해상도의 기기가 가장 많을까? 해상도 점유율 확인하기 (0) 2022.02.10 [React] API 주소 환경변수로 분리하기 (개발서버/실서버) (feat.CRA, github-actions) (0) 2022.01.09 [CSS] 화면 클릭 시 생기는 파란 배경색 없애기 (0) 2022.01.09 [Github Pages/깃헙페이지] gh-pages 브랜치가 아닌 다른 브랜치(main)로 배포하기 (0) 2022.01.03 [Github Pages/깃헙페이지] gh-pages 배포 시 favicon이 안 뜰 때 해결 방법 (0) 2022.01.03