React は、ユーザーがブラウザの [戻る] ボタンを使用して現在のページから離れることを防ぎ、ブラウザが戻ることを防ぎます。

useEffect(() => {
window.history.pushState(null, '', document.URL);
window.onpopstate = function () {
window.history.pushState(null, '', document.URL);
};
return () => {
// 回退事件只作用于当前组件，则需要在离开页面、组件销毁时把回退事件销毁
window.onpopstate = null;
};
}, []);

上記のコードをフック ページに直接コピーします。

1. window.history.pushState(null, '', document.URL);: このコード行は、現在の URL をブラウザーの履歴スタックに追加します。PushState メソッドは、状態オブジェクト、タイトル (現在、ほとんどのブラウザはこのパラメータを無視します)、および URL の 3 つのパラメータを受け入れます。ここでは、状態オブジェクトとタイトルの両方が null に設定され、URL は現在のドキュメントの URL に設定されます。

2. window.onpopstate = function () {...}: このコード行は、popstate イベントを処理する関数を定義します。Popstate イベントは、ユーザーがブラウザの戻るボタンをクリックするなど、アクティビティ履歴エントリが変更されると発生します。この関数では、pushState メソッドを再度呼び出し、現在の URL を履歴スタックに再度追加します。この結果、ユーザーは「戻る」ボタンをクリックしても現在のページから離れることができなくなります。

3. return () => {...}: これは useEffect フックのクリーンアップ関数で、コンポーネントがアンロードされるときに実行されます。この関数では、window.onpopstate を null に設定し、それによって以前に定義された Popstate イベント ハンドラーを削除します。

これにより、ユーザーが「戻る」ボタンをクリックして現在のページから離れることができなくなります。