[ REACT ] 메뉴 활성화 적용 NavLink

증상

state를 사용해서 활성메뉴를 검증하는 경우 페이지 새로고침하였을때 상태값이 초기화 되는 이슈 발견

초기 렌더시에 URL을 파싱해서 활성을 처리하는 경우 페이지 이동시 상태가 변경되지 않는 이슈 발견

 

해결책

NavLink 사용

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

<NavLink to='about' activeClassName="active">about</NavLink>

// Or specifing active style
<NavLink to='about' activeStyle={{color: "red"}}>about</NavLink>

// If you use deep routes and you need an exact match
<NavLink exact to='about/subpath' activeClassName="active">about</NavLink>

 

관련링크

https://stackoverflow.com/questions/42297728/react-js-implement-menu-highlight-active-link/54235985