react next js 환경에서 뒤로가기 핸들링 이슈 (여러가지 시도함)

Question

안녕하세요, react next js 환경에서 프로젝트를 구축하고 있습니다.
하지만 한 가지 문제가 발생했는데요, 제가 대시보드를 개발하면서 각각의 대시보드 메뉴를 구성했습니다(동적페이지). 그래서 각각의 페이지에서 대시보드 수정이 일어나면 뒤로가기 컨펌을 띄우고 취소를 하면 해당 페이지에 남게하려는 로직을 구상했습니다.

여기서 제가 직면한 문제점은
1. 동적 페이지는 브라우저 히스토리에 남지않아 뒤로가기 확인을 누르면 이전 대시보드(동적페이지)화면이 아닌, 일반 화면으로 넘어간다는점.

2. 뒤로가기 취소를 반복하면 url이 변경되지만 강제로 현재 페이지 url로 변경하여도, 다른 대시보드 동적페이지로 이동후 정상적인 뒤로가기를 시도했을경우 완전 엉뚱한 페이지를 가거나 url이 변경되어도 페이지 전환이 되지 않고 현재 페이지에 남는 문제점.

제가 원하는 기능
1. 각각의 동적페이지에서 뒤로가기를 하면 경고창을 알리고 정상적인 이전 동적페이지로 핸들링 되는것

2. 뒤로가기 취소를 반복하여도 브라우저 히스토리에 계속 이전 url이 쌓이지 않은것

만약에 방법이 없다면 차선책은 무엇일까요?

시도해본 코드

1.
  useEffect(() => {
      const handleBeforePopState = (state: any) => {
        window.history.replaceState(null, , router.asPath);
        const isConfirmed = confirm(뒤로가시겠습니까?);
        if (isConfirmed) {
          router.beforePopState(() => true);
          router.back();
        }
        return false;
      };
      router.beforePopState(handleBeforePopState);
      return () => {
        router.beforePopState(() => true);
      };
  }, [router.asPath]);

2.
  useEffect(() => {
    const handleReload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = ;
    };
      window.addEventListener(beforeunload, handleReload);
      // window.addEventListener(popstate, handlePopstate);
      return () => {
        window.removeEventListener(beforeunload, handleReload);
        //  window.removeEventListener(popstate, handlePopstate);
      };
  }, [router.asPath]);

커리어리 AI 봇 · Answer

뒤로가기 핸들링 이슈를 해결하기 위해 다음과 같은 방법을 사용해 보세요.

1.  window.history.pushState 를 사용하여 동적 페이지 이동 시에 히스토리에 추가하도록 합니다.

2. 뒤로 가기 버튼 클릭 시, 경고창을 띄운 후에 사용자가 확인 버튼을 누르면 이전 동적 페이지로 돌아가도록 합니다.

#2의 코드를 사용하면 동적 페이지에서 뒤로 가기 버튼을 눌렀을 때 경고창이 뜨고, 확인 버튼을 누르면 이전 동적 페이지로 돌아가게 됩니다. 또한 뒤로가기 취소를 반복하여도 브라우저 히스토리에 계속 이전 URL이 쌓이지 않습니다.

참고로, Next.js에서는  window  객체가 서버 사이드 렌더링 시에는 사용할 수 없으므로, 브라우저 환경에서만 실행되도록  typeof window !== undefined  조건을 추가해 주세요.