【React】「このサイトを離れますか？」というダイアログを出す

やりたいこと結論：Reactの場合結論：JavaScriptのみの場合 beforeunloadイベント

やりたいこと

フォーム入力中や何かを編集中の画面で、他のページに遷移したりタブを閉じたりするとデータが消えてしまう
という状況で、以下のようなダイアログを出す。

結論：Reactの場合

import { useEffect } from "react";

export default function Sample() {
  useEffect(() => {
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      event.preventDefault();
      event.returnValue = ""; // NOTE: 互換性を保つため
    };
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
  }, []);
  
  return (
    <div>
      <h2>編集画面</h2>
      <textarea id="message" name="message"></textarea>
      <a href="/">Home</a>
    </div>
  );
}

結論：JavaScriptのみの場合

window.addEventListener("beforeunload", (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = "";
});

beforeunloadイベント

これは「現在のページから、他のページに遷移する直前に発生する」イベント。

遷移直前のイベントなので、確認ダイアログを表示したり、その操作をキャンセルすることができる。

Window: beforeunload イベント - Web API | MDN

beforeunload イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。