4. Navigation

기본적으로 페이지가 바뀌면 로딩이 새로됨

링크를 가로채서 이동안하고 페이지 변경하기

HTML5에 생긴 API History.pushState() 이용

<a href="/about" onClick={handleClick}>About</a>

const handleClick = (event: SyntheticEvent) => {
  event.preventDefault();
  const state = {};
  const title = '';
  const url = '/about';
  window.history.pushState(state, title, url); // 실제로 넘어가진 않고 주소만 바뀜
};

window.history()

윈도우의 열람 이력을 최근에 방문한 URL의 배열로 반환

HTML5의 history 객체는 사용자 히스토리에서의 앞 뒤 이동이 가능하도록 유용한 메서드와 속성을 제공

• history.back(): 윈도우 열람 이력에서 뒤로 이동

• history.forward(): 윈도우 열람 이력에서 앞으로 이동

• history.pushState() : 새로운 history를 추가하며 실제 페이지 이동은 일으키지 않음

Link

새로고침 없이 페이지 이동

<Link to="/">Home</Link>
<Link to="/about">About</Link>

NavLink

내비게이션용 링크 개발자 도구에서 확인시 <a> 태그에 class="active"가 잡히게 됨

<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>

Navigate

특정 컴포넌트로 이동해서 무언가 처리하고 난 뒤 다른 페이지로 리다이렉션 시킬때 사용

export default function LogoutPage() {
  return (
    <Navigate to="/" />
  );
}

useNavigate

리다이렉션 함수를 사용할 수 있는 훅

  const navigate = useNavigate();

  const handleClickLogout = () => {
    navigate('/');
  };

  return (
    <button type="button" onClick = {handleClickLogout}>
      Log out
    </button>
  )