[React] 뒤로가기, 링크이동 navigate 함수, Link 함수

useNavigate() 

페이지 전환 시 추가로 처리해야 하는 로직이 있을경우 useNavigate를 사용한다.

 

ex) 로그인 버튼 클릭

  -> 회원가입 사용자 : Main 페이지로 이동

  -> 미가입 사용자 : Sign 페이지로 이동

 

 

useNavigate()문법

navigate('/주소') 

 

function App = () => {
  const navigate = useNavigate()
  
  return (
    <button onClick={()=>{ navigate('/detail') }}>이동</button>
  )
}

 

useNavigate() 이용해서 뒤로가기, 앞으로가기

//뒤로가기
<button onClick={() => navigate(-1)}>
    Go back
</button>

//앞으로가기
<button onClick={() => navigate(1)}>
Go forward
</button>

 

 

Link

클릭 시 바로 이동하는 로직일 때 사용

ex) 상품 리스트에서 상세 보기 페이지 이동