[Next.js] router.push와 router.replace의 차이

로그인을 완료 하고 나서 뒤로가기 버튼을 누르면 어떤 페이지로 이동해야 할까?
로그인 상태는 유지하고 로그인 화면에 들어오기 전 화면으로 이동하는 것이 매끄러울 것이다.
라우팅을 할 때 Router.replace 객체 함수를 사용하면 된다!!!

push

홈 > 로그인 > 리다이렉트 페이지 > [뒤로가기] > 로그인

• push를 사용하면 히스토리가 순서대로 쌓여서, 로그인 다음 페이지에서 뒤로가기 버튼을 누르면 로그인 페이지로 돌아가게 된다.

import React from 'react';

function Login({ history }) {
  history.push('/item');
  return <div>Login</div>;
}

export default Login;

replace

홈 > 로그인 > 리다이렉트 페이지 > [뒤로가기] > 홈

• replace를 사용하면 history 제일 위에 있는 원소를 지금 넣을 원소로 바꿔줘서, 뒤로가기 버튼을 누르면 로그인의 전 페이지로 돌아가게 된다.
• replace는 페이지를 이동한다기 보다는 현재 페이지를 바꿔주는 개념이라고 한다!

import React from 'react';

function Login({ history }) {
  history.replace('/item');
  return <div>Login</div>;
}

export default Login;