Link 와 NavLink active 표시

여기서는 react-router-dom V6 버전을 다룹니다.

Link의 주소로 이동함과 동시에 indicator를 보여주고싶을 경우

1.Link tag

const mypageMatched = useMatch("/mypage");

url 일치 일경우 true값을 반환

<Link to="/mypage" style={mypageMatched ? active : {}}>
        My Page
      </Link>

2.NavLink tag
자체적으로 isActive라는 boolean값을 가지고 있다.
아래와 같이 사용할 수 있다.
style={({ isActive }) => (isActive ? : }
or
style={props => (props.isActive ? : }

<NavLink to="movies" style={({ isActive }) => (isActive ? active : {})}>
        Movies
      </NavLink>