[Router] Router.push와 Router.replace의 차이

이주희·2022년 3월 19일
0

React ♥️ Next.js

목록 보기
3/48

로그인을 완료 하고 나서 뒤로가기 버튼을 누르면 어떤 페이지로 이동해야 할까?
로그인 상태는 유지하고 로그인 화면에 들어오기 전 화면으로 이동하는 것이 매끄러울 것이다.
라우팅을 할 때 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;
profile
🍓e-juhee.tistory.com 👈🏻 이사중

1개의 댓글

comment-user-thumbnail
2023년 8월 28일

😍👍

답글 달기