コンポーネントのアンマウントを防ぐ - 他のコンポーネントを開く前にユーザーに通知する

Question

私のWebアプリケーションには、ユーザーがデータを入力するフォームがあります。他のコンポーネントやバックにナビゲートしたい場合は、フォームの変更が行われたことを確認ダイアログに表示するよう通知します。 私はフォームの上に戻るボタンをユーザがクリックしたが、ユーザがサイドバーメニューオプションをクリックしたときにそれをどのように処理するかを知らない場合、これを実装する方法を知っています。 （反応ルータを使用して、他のコンポーネントへの複数のリンクを持つサイドバーがあります）。

私はcomponentWillunmount（）を使用して何かを試しましたが、どんな場合でもコンポーネントがアンマウントされるので運がありません。

誰でもこの経験があれば、私は本当に助けが必要です。

Answer 1

反応し、ルータのマニュアルを参照してから、一例であるここでは、routerWillLeaveフックを試してみてください。

const Home = withRouter(
    React.createClass({ 

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

    routerWillLeave(nextLocation) { 
     // return false to prevent a transition w/o prompting the user, 
     // or return a string to allow the user to decide: 
     if (!this.state.isSaved) 
     return 'Your work is not saved! Are you sure you want to leave?' 
    }, 

    // ... 

    }) 
) 

https://github.com/ReactTraining/react-router/blob/master/docs/guides/ConfirmingNavigation.md