Reactアプリケーションでブラウザ遷移の制御を行ってました。
react-routerのPromptを使っていたんですが、動作検証を行なっていると以下のissuesで議論されている問題にぶつかり断念することに。
https://github.com/ReactTraining/react-router/issues/5405
Prompt 内部で使用されている history.block が問題っぽいですが、そもそもの原因はブラウザ側のセキュリティの仕様っぽい。
https://github.com/ReactTraining/history/issues/690
Promptでできること
ブラウザの「戻る」「進む」のアクション時に『保存が行われていませんがよろしいですか？』などのメッセージを出して、画面遷移を行うか画面に止まるかなどの確認ダイアログを表示することができる。
うまく制御ができないパターン
通常の操作をしている時には、問題なく想定通りに動いてくれるのですが、以下の操作を行うと確認ダイアログでキャンセルを押した時にURLが元のURLに戻らない問題が発生します。
- F5等で画面を再読み込みした直後に「戻る」「進む」のアクションを行う
対応策
Promptを使わずに独自実装を考えましたが、現時点で以下のようなブラウザの制限があり制御が難しいため遷移時の制御を外しました。
ブラウザの制限
- ブラウザのhistoryの数は取得できるが、自分がどのhistoryにいるかが提供されていない
- 「戻る」「進む」のどちらが使われたのかの情報をイベントで取得できない
まとめ
今回は独自実装はなかなかコストがかかり、全てのパターンで動作保証を行うのが難しそうだったため中途半端になるくらいなら制御しない方針にしました。
ユーザー操作によって表示されている画面とURLに差異が発生しうるため、不要なバグやトラブルが発生する可能性があるためです。
上に紹介させていただきましたissuesの通り、history.blockは削除したい方針のようなので、もっといい方法が確立してから対応を行うのが無難な気がします。
もし既に信頼できる方法での解決がされているようであれば連絡いただけると幸いです。