ComponentWillUnmountのビアダイアログボックスで確認後に反応ルータの遷移をキャンセル/許可する

Question

私はReduxアプリケーションを構築しています。私は、データを保存せずにComponentを終了したい場合、またはトランジションをキャンセルして保存しておきたい場合、ユーザーに確認を求めます。

たとえば、コンポーネントのマウントを停止する方法はありますか？

Answer 1

良い方法は、あなたがすでにreact-routerを使用している場合は、次のrouterWillLeaveフックを作成することです。

export default withRouter(MyComponent); 

がhttps://github.com/reactjs/react-router/blob/master/docs/guides/ConfirmingNavigation.mdでドキュメントを参照してください：として

componentDidMount() { 
    this.props.router.setRouteLeaveHook(this.props.route, this.beforeUnload); 
} 

routerWillLeave(e) { 
    // check for a condition here 
    if (this.state.allowLeave === false) { 
    const message = 'Are you sure?'; 
    (e || window.event).returnValue = message; 
    return message; 
    } 
} 

また、必ずthis.props.routerが利用できるようにするために、あなたはあなたのコンポーネントをエクスポートする必要があります。

Answer 2

コンポーネントをアンマウントできないようにする方法はありません。 window.onbeforeunloadを使用すると、ユーザーが現在のタブを閉じて、バックグラウンドでデータをcomponentWillUnmountに保存しないようにすることができます。それは私のアプリでそれを行う方法です。

undefined以外のものが返された場合、確認ポップアップが表示されます。

window.onbeforeunload =() => 'Are you sure?';