反応ルータを使用してルート変更を防止する方法

Question

私のReactアプリケーションには、フォームが汚れている場合にユーザーが退出しないようにするための特定のページがあります。

<Route path="dependent" component={DependentDetails} onLeave={checkForm}/> 

をそして、私のonLeaveは次のとおりです：私の反応-ルートで

、私はこのような小道具onLeave使用しています

const checkForm = (nextState, replace, cb) => { 
    if (form.IsDirty) { 
    console.log('Leaving so soon?'); 
    // I would like to stay on the same page somehow... 
    } 
}; 

発射から新しいルートを予防する方法があるとユーザーを同じページに保つ？

助けていただけたら幸いです！

Answer 1

が反応ルータAPIのような場合のためTransitionオブジェクトを提供し、あなたが使用しているコンポーネントのライフサイクルwillTransitionTo方法、フックを作成することができます。何か（コードが反応し、ルータexamplesをgithubの上から撮影したもの）のような：

var Form = React.createClass({ 

    mixins: [ Router.Navigation ], 

    statics: { 
    willTransitionFrom: function (transition, element) { 
     if (element.refs.userInput.getDOMNode().value !== '') { 
     if (!confirm('You have unsaved information, are you sure you want to leave this page?')) { 
      transition.abort(); 
     } 
     } 
    } 
    }, 

    handleSubmit: function (event) { 
    event.preventDefault(); 
    this.refs.userInput.getDOMNode().value = ''; 
    this.transitionTo('/'); 
    }, 

    render: function() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
      <p>Click the dashboard link with text in the input.</p> 
      <input type="text" ref="userInput" defaultValue="ohai" /> 
      <button type="submit">Go</button> 
     </form> 
     </div> 
    ); 
    } 
}); 

Answer 2

私は彼のリンクの例では、現在examplesフォルダにもはやであるため、推奨されるアプローチは、ラザレフの答え以来変わっていないと思います。

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

そして、確認の警告に表示される文字列を返す関数であることをrouterWillLeaveを定義します。その代わり、私はあなたが定義することによってthis exampleに従うべきだと思います。