[React] Link, Navigte, useNavigate 차이

 

 

💡 각각 언제 쓰면 좋을지 알아보자.

 

🌐 Link

클릭해서 페이지를 이동하도록 할 때!

텍스트나, 버튼, 이미지 등에 사용한다.

<Link to="/">
  <Button as="div">홈으로 가기</Button>
</Link>

 

 

🌐 Navigate

특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때!

• 회원 전용 페이지에 로그인 없이 들어와서 로그인 페이지로 리다이렉트 하는 경우
• 상품 상세 페이지에서 상품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우

  if (!course) return <Navigate to="/courses" />;

 

 

🌐 useNavigate

특정 코드의 실행이 끝나고나서 페이지를 이동시키고 싶을 때!

• 장바구니 담기를 눌렀을 때 리퀘스트를 보내고, 장바구니 페이지로 이동시키는 경우
• 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후, 페이지를 이동시키는 경우
• 리다이렉트된 로그인 페이지에서 로그인을 완료한 후, 처음 진입했던 페이지로 돌아가는 경우

  const handleAddWishlistClick = () => {
    addWishlist(course?.slug);
    navigate('/wisilist');
  };

 

 

 

🔗 https://velog.io/@iberis/%EC%BD%94%EB%93%9C%EC%9E%87-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-3.-Navigate-useNavigate-redirect

[코드잇] 리액트 라우터 - 3. Navigate, useNavigate, redirect