reactjs - 反応フックで離脱警告を設定するには?

Question

反撃すると進行状況が失われることを示す必要があるアプリケーションを作成しています。

私はuseEffectフックを使用しました：

 useEffect(() => {
        return () => {
          showWarning();
        }
  }, [])

警告を表示して確認できるように、このバック アクションを停止するにはどの関数を使用できますか?

Answer 1

を使用している場合は、この種の動作を処理react-routerする必要があります。詳細については、 httpsPrompt ://reactrouter.com/core/api/Prompt をご覧ください。

Answer 2

「このバックアクションを停止するためにどの関数を使用できますか」ブラウザが操作を完了するのを停止しようとしている場合、それはアプリを設計する方法ではありません。return ステートメントを使用した useEffect は、マウントではなくクリーンアップ作業に使用されます別のコンポーネントまたはメッセージの表示

代わりにイベントを使用してアプリonbeforeunloadのハンドラーをクリーンアップするunmountこともできますが、変更できないデフォルトのメッセージを含むポップアップが表示されます

 useEffect(() => {
   function showWarning() {
     return '';
   }

   window.addEventListener('beforeunload', showWarning);

   return () => {
      window.removeEventListener('beforeunload', showWarning);
   }
 })