react에서 navigate 사용 (useNavigate)

Link는 특정주소로 이동해주는 태그, Navigate는 특정 행동 수행시 해당 주소로 이동할수있게 해준다.

1. useNavigate 사용
   useNavigate는 양식 제출 혹은 특정 event 발생시 url 조작할 수 있는 interface 제공

• useNavigate 인자
  첫번째 인자로는 주소를 받고, 두번째 인자로 {replace : state} 인수를 사용한다.
  • replace(true or false)
    • true : nav에 적힌 주소로 넘어간 후 뒤로가기 해도 방금 페이지로 돌아오지 않음. 자신의 메인 페이지로 돌아오게 됨.
      • false : 뒤로가기 가능
• useHistory 기능 포함

<>
  <button onClick={() => navigate(-2)}>
    Go 2 pages back
  </button>
  <button onClick={() => navigate(-1)}>
    Go back
  </button>
  <button onClick={() => navigate(1)}>
    Go forward
  </button>
  <button onClick={() => navigate(2)}>
    Go 2 pages forward
  </button>
</>

useNavigate 사용법