React - navigate, window.location.href

로그인 중에 토큰이 정의되지 않고 페이지를 새로 고친 후 제대로 작동하는 문제

예시: navigate('/main) 했을 때 main page로 넘어가지만 user 토근이 undefined 가 나옴

window.location.href와 navigate는 둘 다 브라우저의 주소(URI)를 변경하여 새로운 페이지로 이동하는 방법입니다.

1. window.location.href:
   • 이 방법은 JavaScript에서 현재 페이지의 주소를 변경하여 새로운 주소로 이동하는 가장 간단한 방법 중 하나입니다.
   • 페이지를 새로고침하여 이동하는 것과 동일한 효과를 가져옵니다. 새로운 페이지로 이동할 때 브라우저의 히스토리 스택에 새 항목이 추가되며, 뒤로 가기 버튼으로 이전 페이지로 돌아갈 수 있습니다.
   • 주로 페이지를 완전히 새로고침하고 싶을 때 사용하며, 현재 페이지의 상태를 완전히 초기화하는데 유용합니다.

예시:

onSuccess: (data) => {
  localStorage.setItem('accessToken', data.accessToken);
  window.location.href = '/main'; // '/main' 페이지로 이동하며 새로고침됨.
},

2. navigate (예: React Router의 useNavigate 훅 사용):
   • navigate는 주로 라우팅 라이브러리에서 제공하는 기능으로, 페이지를 변경하면서 브라우저의 히스토리 스택에 새 항목을 추가하지 않고 페이지를 이동합니다.
   • 뒤로 가기 버튼을 누를 때 이전 페이지로 돌아가지 않고, 이전 페이지의 상태가 유지됩니다.
   • React Router의 useNavigate 훅을 사용하여 페이지를 변경할 수 있습니다.

예시:

import { useNavigate } from 'react-router-dom';

// ...

const navigate = useNavigate();

// ...

onSuccess: (data) => {
  localStorage.setItem('accessToken', data.accessToken);
  navigate('/main'); // '/main' 페이지로 이동하지만, 페이지는 새로고침되지 않음.
},

사용하는 라이브러리에 따라 window.location.href와 navigate를 사용하는 것에 따라 페이지 이동이 다르게 처리됩니다. window.location.href는 페이지를 완전히 새로고침하고 초기화하는데 사용되고, navigate는 페이지를 변경하면서 이전 페이지의 상태를 유지하는 데 사용됩니다.