next router, push vs replace

next router, push vs replace

router.push()

• push 메서드는 현재 페이지 스택에 새로운 페이지를 추가하고 해당 페이지로 이동합니다.
• 예를 들어, 사용자가 버튼을 클릭하면 push 메서드를 호출하여 새로운 페이지로 이동할 수 있습니다.
• 이렇게 하면 브라우저의 뒤로가기 버튼을 사용하여 이전 페이지로 되돌아갈 수 있습니다.

router.push() 사용법

router.push(url, as, options);

1. url

• url (문자열 또는 객체): 이동할 페이지의 URL을 지정합니다. 문자열 형태로 URL을 전달할 수도 있고, 객체 형태로 경로와 쿼리 파라미터 등을 지정할 수 있습니다.

// 문자열 형태로 URL 전달
router.push('/about');

// 객체 형태로 경로와 쿼리 파라미터 지정
router.push({
  pathname: '/post',
  query: { id: 1 },
});

2. as

• as (문자열 또는 객체, 선택 사항): 실제로 브라우저 주소 표시줄에 표시될 URL을 지정합니다. 주로 동적 라우팅에서 사용되며, as를 사용하여 노출되는 URL을 다르게 설정할 수 있습니다.

router.push('/post/[id]', '/post/1'); // 실제 URL: /post/1

3. options

• push() 함수는 다음과 같은 옵션 객체를 선택적으로 사용할 수 있습니다.

1. shallow (부울, 선택 사항): 페이지 전환 시 컴포넌트의 상태를 유지할지 여부를 지정합니다. true로 설정하면 페이지 전환 시 컴포넌트의 상태가 유지되며, false로 설정하면 컴포넌트가 언마운트되고 다시 마운트됩니다.

router.push('/about', undefined, { shallow: true });

1. locale (문자열, 선택 사항): 다국어 지원 시 전환할 페이지의 로케일을 지정합니다.

router.push('/about', undefined, { locale: 'en-US' });

1. scroll (부울 또는 객체, 선택 사항): 페이지 전환 시 스크롤 위치를 조정하는 방법을 지정합니다. false로 설정하면 스크롤 위치가 유지되지 않으며, 객체로 { x: number, y: number } 형식으로 지정하여 특정 위치로 스크롤할 수 있습니다

// 스크롤 위치 유지하지 않음
router.push('/about', undefined, { scroll: false });

// 특정 위치로 스크롤
router.push('/about', undefined, { scroll: { x: 0, y: 0 } });

router.replace()

• replace 메서드는 현재 페이지 스택을 변경하고 새로운 페이지로 이동합니다.
• 이렇게 하면 사용자가 뒤로가기 버튼을 클릭했을 때, 이전 페이지로 되돌아갈 수 없습니다.
• 일반적으로 replace 메서드는 페이지 전환 후 사용자의 이전 페이지 히스토리를 유지하고 싶지 않을 때 사용됩니다.
• 매개변수나 옵션등의 사용법은 push와 동일합니다.

데모 : push vs replace

• /routes/[id] 경로에서 작성한 코드
• id에 5가 들어있을 경우(/5, /50, /500 등), replace로 페이지를 이동시켜서 history에 쌓지 않습니다.
• router.back()을 통해서는 replace로 이동시킨 페이지로 돌아올 수 없다.

import { useRouter } from "next/router";

const DetailPage = () => {
  const router = useRouter();
  const { id } = router.query;

  const goBack = () => {
    router.back();
  };

  const goForward = () => {
    // 5가 들어간 페이지는 history에 쌓지 않음
    if (id?.includes("5")) {
      router.replace(`/routes/${Number(id) + 1}`);
    } else {
      router.push(`/routes/${Number(id) + 1}`);
    }
  };

  return (
    <>
      <div className="as__path">{router.asPath}</div>
      <div className="button__wrap">
        <div onClick={goBack} className="button mr">
          이전
        </div>
        <div onClick={goForward} className="button">
          다음
        </div>
      </div>
    </>
  );
};

export default DetailPage;