React Router nicht neu laden Komponente beim Ändern von URL-Parametern

Question

Ich weiß, dass es nicht ein Standardverhalten/Funktion von React-Router, um uns helfen, die aktuelle Komponente leicht neu laden, aber ich brauche das wirklich in meiner Anwendung.

Meine Anwendung befasst sich mit Produkten. Ich habe eine Produktliste, die ich laden kann, und wenn ich auf einen Artikel klicke, werden die betreffenden Produktdetails angezeigt.

Auf dieser Seite habe ich Produkt-Links im Zusammenhang, die die gleiche Komponente laden, aber mit einem anderen Produktdetails, befindet sich in

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

bin ich Daten in meinem componentWillMount holen, und es scheint, dass, wenn ich nur ändern die URL, eine neue Komponente ist NICHT gemountet, und so habe ich immer meine alten Daten angezeigt, ohne etwas zu holen.

Als Anfänger mit React suche ich nach etwas Hilfe oder einigen Tricks, um die betroffene Komponente neu zu laden. Ich meine, dass ich den ProductDetail mit dem guten Produkt neu laden kann.

Ich habe versucht, mich mit componentWillUpdate (eine Methode, in der ich sehe, dass der Router URI ändert: D) ​​zu sehen, aber ich kann nicht setzenState innerhalb davon, um meine Komponente neu zu laden (es scheint nicht zu sein gute Praxis überhaupt)

Eine Idee, wie kann ich das schaffen?

EDIT: Nach der ersten Antwort muss ich OnEnter verwenden. Ich bin jetzt mit dem Weg vorbei Zustand/Requisiten an die betreffenden Komponente fest:

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

Die Art und Weise zu handhaben es hängt, wenn Sie mit Flussmittel, redux oder aber Sie mögen, dass Ihre Aktionen verwalten. Obendrein würde ich versuchen, Verwendung von onChange Eigentum der Strecke Komponente (überprüfen React router docs) zu machen:

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

Und dann in der irgendeinemethode erstelle die Aktion, wenn Sie redux verwenden oder aber im Fluss gemacht. Die Redux sei:

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

Und die onEnterHandler mit dem redux Speicher:

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

Und dann in Ihrem Product Komponente würden Sie die neuen Informationen drucken (Es wäre ein bisschen mehr von Lernen erfordert in Redux- und Redux-Sagas-Bibliotheken, um diesen Teil zu vervollständigen).

Denken Sie daran, dass React ist nur der Ansicht Teil, versuchen, all diese Probleme zu lösen, indem Sie nur reagieren ist nicht nur nicht empfehlenswert, sondern würde auch Ihren Code durcheinander bringen.