#beforeunload

beforeunload 이벤트 헨들러가 동작하지 않는것 같아요.

공식문서 보고 이렇게 했는데 혹시 이거 막혔나요? ㅠㅠ 텍스트 변경이 안되네요.... https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event

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

안녕하세요, 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]);