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 사용법

좋은 웹페이지 즐겨찾기