Reactでブラウザバックを検知する方法

Reactでブラウザバックを検知する方法

Reactでブラウザバックを検知する場合、特別な関数を使わずに通常のJavaScriptの実装と同様にpopstateを使用することになるかと思います。
注意点として、popStateはブラウザによってはもう動かない場合があります。
なので、特定の端末やブラウザで動作する実装と思ってください。
以下はreact-router-domと組み合わせた実装例になります。

まず、react-router-domをインストールします。

# npm
npm install react-router-dom@6

# yarn
yarn add react-router-dom@6

次に、ブラウザバックを検知するコンポーネントを作成します。

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

const BackButtonDetector: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const prevLocation = React.useRef(location);

  useEffect(() => {
    const handlePopState = () => {
      if (location.pathname === prevLocation.current.pathname) {
        alert('ブラウザバックが検知されました');
      }
    };

    window.addEventListener('popstate', handlePopState);

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

  useEffect(() => {
    prevLocation.current = location;
  }, [location]);

  return <div>ブラウザバックを検知します。</div>;
};

export default BackButtonDetector;

上記の例では、useLocationを使用して現在のパスを監視し、popstateイベントをリスンしてブラウザバックを検知します。
ブラウザバックが検知された場合はアラートを表示します。