【React】ブラウザのリロード、戻るを"ほぼ"無効化

はじめに

ブラウザのリロードや戻るボタンをほぼ無効化する方法について調べたことをまとめました。
完全に無効化することは難しいと思うので、参考程度にしてください。
Reactでの実装を想定しており、ViteなどでReactアプリを作成している前提です。
アプリ全体で無効化するためには、App.tsxなどのルートコンポーネントに記載してください。

ブラウザのリロードボタンの無効化

状態(useStateなど)が変更された後にブラウザのリロードボタンを押すと確認のポップアップが出るようにします。

useEffect(() => {
    // ブラウザのリロードを無効化
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = '';
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

e.returnValueについて
現在e.returnValueは非推奨機能となっていますが、互換性のため一部ブラウザでは引き続きサポートされているようです。代替機能はまだ存在しないようなので、どうしても必要な場合以外は使用を避け代替機能を待つ方がいいかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/Event/returnValue

ポップアップに表示される「再読み込み」ボタンを押すとリロードが実行されます。
また、このポップアップはブラウザやタブを消そうとする時にも表示され、誤った離脱を防ぐことができます。

ブラウザの戻るボタンの無効化

戻るボタンの無効化は、直前の履歴に現在のページを追加することで現在のページをループさせることで実現します。

// ブラウザの戻るボタン無効化
  const disableBrowserBack = () => {
    window.history.go(1);
  };

  useEffect(() => {
    window.history.pushState(null, '', window.location.href);

    window.addEventListener('popstate', disableBrowserBack);

    return () => {
      window.removeEventListener('popstate', disableBrowserBack);
    };
  }, [disableBrowserBack]);

• blockBrowserBack関数では、ブラウザの戻るボタン押下時に、それを打ち消すために履歴を１つ進めることで戻れないようにしています
• window.history.pushState(null, '', window.location.href);では、現在のURLの履歴を１つ追加しています

キーボードのリロード/戻る/進む無効化

以下コードを記載することでキーボードによるリロード/戻る/進む処理を無効化することができます。

useEffect(() => {
    // キーボードでのリロード/戻る/進む無効化
    const disableKeys = (e: KeyboardEvent) => {
      if (
        e.key === 'F5' ||
        (e.ctrlKey && e.key === 'r') ||
        (e.metaKey && e.key === 'r') ||
        (e.altKey && e.key === 'ArrowLeft') ||
        (e.altKey && e.key === 'ArrowRight')
      ) {
        e.preventDefault();
        e.stopPropagation();
      }
    };

    window.addEventListener('keydown', disableKeys);

    return () => {
      window.removeEventListener('keydown', disableKeys);
    };
  }, []);

まとめ

ブラウザでのリロード、戻る、進むを無効化する方法をまとめました。
しかし、完全に無効化することは難しいので、使い所は注意が必要かと思います。
また、ブラウザの標準的な挙動に反するため、ユーザー体験に悪影響を及ぼす可能性があるため慎重に使うことをおすすめします。