React-Router v4 - 機能付き遷移の防止

Question

v4 docsのようにナビゲーションを防止することができましたが、アラートの代わりにモーダルを使用できるように関数をフックアップしようとしています。

機能：

<NavigationPrompt when={true} message={(location) => this.abandonForm('confirm')} /> 

this.props.showModal('confirm')が正常にモーダルを活性化するが、モーダルの後ろのページには、まだ移行 - どのように私は、モーダルでボタンまでの移行を防ぐことができます。私のページで

abandonForm = (route) => { 
    this.props.showModal('confirm'); 
    console.log('leaving..'); 
} 

クリックされましたか？

Answer 1

ブラウザでは、前述したアラートボックスを使用したナビゲーションキャンセルのみが許可されます。この制限は、ブラウザやOSが（ユーザーが信頼する）何かを擬似的に模倣したユーザーエクスペリエンスを作成するために、javascriptのギミックを使用しようとするフィッシング/詐欺サイトによって動機付けられています。アラートボックスに表示されるテキストのフォーマットも作成され、サイトから発信されていることは明らかです。

もちろん、現在のURLがアプリ内にとどまっている限り、あなたはreact-routerの履歴を使って制御できます。たとえば、あなたは、ナビゲーション上で、次の操作を行うことができます

• は確認
• なしナビゲーションはすぐに戻って前の場所に移動しますが、今回際に、今トップ
• 上のモーダルとリアルのために離れて移動できるようにユーザーはモーダルのボタンをクリックします。

このアプローチの欠点（その複雑さを除いて）は、別のサイトに完全にナビゲートしようとすると確認ダイアログが表示されないということです。