[解決済み] react-routerでユーザーのページ離脱を検知する。

質問

ReactJSアプリで、特定のページから移動したときにユーザーに通知したいのです。具体的には、ある行動をするように思い出させるポップアップメッセージを表示します。

"変更は保存されましたが、まだ公開されていません。今すぐ実行しますか?"。

このトリガーは react-router それとも、reactのページ/コンポーネントの中から行うことができるものでしょうか？

後者については何も見つかっていませんし、前者については避けたいと思っています。もちろん、それが普通でない限り、ですが、そうなると、ユーザーが行く可能性のある他のすべてのページにコードを追加することなく、そのようなことを行うにはどうすればよいのかが気になります...

どんな洞察でも歓迎します、ありがとうございます

解決方法は？

react-router v4 では、ナビゲーションをブロックする新しい方法として Prompt . これをブロックしたいコンポーネントに追加するだけです。

import { Prompt } from 'react-router'

const MyComponent = () => (
  <>
    <Prompt
      when={shouldBlockNavigation}
      message='You have unsaved changes, are you sure you want to leave?'
    />
    {/* Component JSX */}
  </>
)

これはあらゆるルーティングをブロックしますが、ページのリフレッシュやクローズはブロックしません。これをブロックするには、これを追加する必要があります（適切なReactライフサイクルで必要に応じて更新します）。

componentDidUpdate = () => {
  if (shouldBlockNavigation) {
    window.onbeforeunload = () => true
  } else {
    window.onbeforeunload = undefined
  }
}

オンビフォーアンロード は、ブラウザによって様々な対応がなされています。