リアルーターがURLパラメータを変更するときにコンポーネントをリロードしない

Question

私が現在のコンポーネントを簡単にリロードするのに役立つデフォルトの動作/機能ではないことは知っていますが、

私のアプリケーションは製品を扱います。私はロードできる製品リストを持っています。アイテムをクリックすると、関連する製品の詳細が表示されます。そのページで

、私は同じコンポーネントをロード関連製品へのリンクを持っていますが、

<Route path="/products/:id/details" component={ProductDetail} /> 

にある他の製品の詳細、と私は私のcomponentWillMountでデータをフェッチM、と私は唯一の変更ならば、それはと思われますURLは新しいコンポーネントがマウントされていないので、何かを取得せずに常に古いデータを表示しています。

Reactを使用している初心者として、私はそのページで関係するコンポーネントをリロードするための助けやヒントを探しています。私は良い製品でProductDetailをリロードできることを意味します。

componentWillUpdate（ルータのURIが変更されていることがわかります：D）を見てみましたが、コンポーネントのリロードを行うためにsetStateを設定できません。良い練習）

どのように私はこの作品を作ることができますか？

編集：最初の回答によると、私はonEnterを使用する必要があります。私は今、関係コンポーネントに状態/小道具を渡す方法で立ち往生M：

const onEnterMethod =() => { 
    return fetch(URL) 
     .then(res => res.json()) 
     .then(cmp => { 
      if (cmp.length === 1) { 
      // How to pass state/props to the next component ? 
      } 
     }); 
}; 

Answer 1

あなたは、フラックス、Reduxのか、しかし、あなたはあなたの行動を管理するを使用している場合、それを処理する方法が決まります。

<Route path="/products/:id/details" component={ProductDetail} onChange={someMethod} /> 

をそしてのsomeMethodにフラックスで行われている、しかし、あなたはReduxのを使用している場合は、アクションを作成するか：その上、私は（React router docsを確認してください）ルート要素ののonChangeプロパティを使用するようにしようとするだろう。 Reduxのは次のようになります。（それはでの学習の少しを必要とする

function onEnterHandler(store) { 
     return (nextState, replace) => { 
     store.dispatch({ 
      type: "CHANGEPRODUCT", 
      payload: nextState.params.id 
     }) 
     }; 
    } 

そしてあなたProductDetailコンポーネントに新しい情報を印刷します：

<Route path="/products/:id/details" component={ProductDetail} onEnter={onEnterHandler(store)} /> 

そしてReduxのストアとonEnterHandler reduxおよびredux-sagasライブラリを使用してその部分を完成させます）。

リアクションは単なるビューパーツであり、リアクションのみを使用してこれらの問題を解決しようとすると、推薦されないだけでなく、コードが混乱することにも注意してください。