React Router : replace와 push의 차이점

Router.replace와 Router.push의 차이점

라우터 기록은 stack의 routes처럼 작동함

router.replace를 사용하면 스택 상단을 덮어 씀

router.push를 사용하면 stack의 맨 위에 새 경로가 추가됨

라우터 기록을 사용하면 마지막 페이지로 돌아갈 수 있음

예를 들어, 사용자가 유효하지 않은 경로로 이동하면 router.replace를 사용하여 사용자가 유효하지 않은 경로로 다시 이동하지 못하게 할 수 있음

 

---

replace

import React, { useEffect } from 'react';
import Router from 'next/router';

const Signup = () => {
  const dispatch = useDispatch();
  const { me } = useSelector((state) => state.user);

  useEffect(() => {
    if (me && me.id) {
      Router.replace('/');
    }
  }, [me && me.id]);

  useEffect(() => {
    if (signUpDone) {
      Router.replace('/');
    }
  }, [signUpDone]);

  return (
    <div>singUp</div>
  );
};

export default Signup;

뒤로가기시에 그 페이지 안보이도록 하고 싶으면 replace

 

---

push

import React, { useEffect } from 'react';
import Router from 'next/router';

const Profile = () => {
  const { me } = useSelector((state) => state.user);

  useEffect(() => { // 내 정보가 없으면 되돌려보내기
    if (!(me && me.id)) {
      Router.push('/');
    }
  }, [me && me.id]);

  if (!me) {
    return null;
  }
  return  (
    <>
      <div>Login</div>
    </>
  );
};

export default Profile;

뒤로가기시에 보여도 괜찮으면 push