React router - useNavigate

 

useNavigate

useNavigate는 Link컴포넌트를 사용하지 않고 다른 페이지로 이동할 수 있다.

• 파라미터가 숫자 타입이면 앞으로 가거나 뒤로 간다. 
  navigate(-1) 뒤로가기 / navigate(-2) 뒤로 2번가기
• 페이지 이동 시, replace 옵션이 있는데, 이 옵션은 페이지 이동 기록이 남지 않아 
  뒤로가기 버튼을 눌러도 이전 페이지로 이동하지 않고 정해진 페이지로만 이동한다.

import { Outlet, useNavigate } from "react-router-dom";

const LayOut = ()=> {
  const navigate = useNavigate()

  const goBack = ()=> {
    //이전페이지로 이동
    navigate(-1)
  }

  const goArticle = ()=> {
    // article페이지로 이동
    navigate('/article', {replace: true})
  } 
  return (
    <>
      <div>
        <header style={{ background: 'lightgray', padding : 16, fontSize: 24 }}>
          Header
          <button onClick={goBack}>뒤로가기</button>
          <button onClick={goArticle}>게시글 목록</button>
        </header>
      </div>
      <main>
        <Outlet/>
      </main>
    </>
  );
};
export default LayOut;