現在のコンポーネントに変更がある場合、新しいルート/コンポーネントの読み込みを停止します。

Question

ユーザーが次のタブに移動する前にローカル状態が変更されているかどうかを確認する必要があります。コンポーネント放棄のようなもの。次のように私は

1. がcomponentWillUnmount経由でこれを達成、2つのオプションが出ています。その良い習慣がある場合、コンポーネントがアンマウントされるのを条件付きで停止する方法がありますか？

2. windowを介して。以下の溶液中で述べたように：https://groups.google.com/forum/#!topic/reactjs/z63RGG1l_0U

この問題に関するすべてのアイデアは大歓迎です:) react-router-reduxルータで

Answer 1

は状態の一部であるので、あなたはその上で試すことができます。

これを行うには、setRouteLeaveHook関数を提供するRouterContextを見てください。 または 私が覚えている限り、2番目のオプションもあります。あなたが反応し、ルータのソースコードを見れば、コンテキストのルーターオブジェクトは、listenBeforeLeavingRouteに

this.context.router.listenBeforeLeavingRoute 

しかし、その基本的に同じものが含まれています。しかし、それは異なる層からアクセス可能です。

編集：RouteにはonLeaveフックがあり、便利です！

どうにかして助けてください。

よろしく、 マリウシュ

Answer 2

はどのようにユーザーが次のタブに移動しますか？ <Link>を使用しているときは、あなたの状態でunsavedChangesフラグを定義することができます。ユーザーが現在のタブを離れる必要がないと思われるときはいつでも、これをtrueに設定します（アクションをディスパッチし、そのアクションを実行する減速器を持つことによって）。もちろん

class Foo extends React.Component { 
    handleClick(e) { 
    const { unsavedChanges } = this.props 
    if(unsavedChanges) { 
     e.preventDefault() 
    } 
    } 
    render() { 
    return (
     <Link to='/nextTab' onClick={this.handleClick}>Bar</Link> 
    ) 
    } 
} 

あなたのコンポーネントの小道具にunsavedChangesを渡す必要があります。