React Router Standort nur in einigen Komponenten aktualisiert

Question

Ob Links oder this.props.history.push(), URL in der Adressleiste wird korrekt aktualisiert, sowie this.props.location in einer Komponente, die höher ist der DOM-Baum (in diesem Fall meine App Komponente).

Aus irgendeinem Grund aktualisiert es nicht this.props.location in meinen Komponenten, die weiter unten in der Struktur sind, die meine Routen fehlschlagen verursacht.

Irgendwelche Vermutungen, was könnte schief gehen?

HINWEIS: Ich verwende Redux in diesem Projekt, aber ich ändere nicht die this.props.history mit Redux, zumindest für jetzt. Ich glaube nicht, dass dies etwas bewirken sollte, aber wenn es so ist, lassen Sie es mich wissen

bearbeiten: Hier ist der relevante Teil des DOM Baumes (mit meiner E-Mail sorgfältig ausgekratzt), wenn es hilfreich ist. Wie Sie sehen können, hat die Authenticated Komponente eine veraltete this.props.location (/plans), während die App korrekt ist (/posts). Beide sind in router eingepackt. Komponenten weiter unten im Baum als Authenticated haben auch den falschen Standort.

Answer 1

Sie es zu tun haben wahrscheinlich mit blocked updates. Glücklicherweise ist es nicht schwer zu lösen:

Wenn Sie in dieser Ausgabe ausgeführt werden, während ein höherer Ordnung Komponente wie connect (Fa reagieren-redux), können Sie nur diese Komponente wickeln in einem withRouter die blockierte entfernen Aktualisierung.

// before 
const MyConnectedComponent = connect(mapStateToProps)(MyComponent) 
// after 
const MyConnectedComponent = withRouter(connect(mapStateToProps)(MyComponent))