Reactでブラウザバックを禁止にする方法

React Typescript

Reactでブラウザバックを禁止にする方法

ブラウザバックを禁止するためには、ReactのuseEffectフックとpopStateを使用する方法があります。
注意点として、popStateはブラウザによってはもう動かない場合があります。
なので、特定の端末やブラウザで動作する実装と思ってください。
以下は、Reactでブラウザバックを防ぐための実装例です。

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const PreventBackNavigation: React.FC = () => {
  const history = useHistory();

  useEffect(() => {
    // ブラウザバックを防ぐためのイベントリスナーを追加
    const handlePopState = (event: PopStateEvent) => {
      event.preventDefault();
      // 元のURLに戻す
      history.push(history.location.pathname);
    };

    // イベントリスナーを登録
    window.addEventListener('popstate', handlePopState);

    // クリーンアップ関数
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, [history]);

  return <div>このページではブラウザバックが無効化されています。</div>;
};

export default PreventBackNavigation;

説明

  • useHistoryフックを使用して、現在のヒストリーオブジェクトにアクセスします。
  • useEffectフック内でpopstateイベントリスナーを追加し、ブラウザバックの際に現在のURLを再度プッシュすることでブラウザバックを防ぎます。
  • クリーンアップ関数でイベントリスナーを解除します。

依存ライブラリ

  • react-router-domが必要です。

もしreact-router-domがまだインストールされていない場合、以下のコマンドでインストールできます。

npm install react-router-dom

または

yarn add react-router-dom