Comment écouter les changements de route dans react router v4?

J’utilise withRouter pour obtenir l’ location prop. Lorsque le composant est mis à jour à cause d’un nouvel itinéraire, je vérifie si la valeur a changé:

 @withRouter class App extends React.Component { static propTypes = { location: React.PropTypes.object.isRequired } // ... componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { this.onRouteChanged(); } } onRouteChanged() { console.log("ROUTE CHANGED"); } // ... render(){ return     // ...   } } 

J’espère que cela aide

Pour développer ce qui précède, vous devrez accéder à l’object historique. Si vous utilisez BrowserRouter , vous pouvez importer withRouter et envelopper votre composant avec un composant d’ordre supérieur afin d’avoir access via les accessoires aux propriétés et fonctions de l’object d’historique.

 import { withRouter } from 'react-router-dom'; const myComponent = ({ listen }) => { listen((location, action) => { // location is an object like window.location console.log(action, location.pathname, location.state) }); return 
...
; }; export default withRouter(myComponent); 

La seule chose à savoir est que, avec Routeur et la plupart des autres moyens d’accéder à l’ history semble que les accessoires soient pollués au fur et à mesure qu’ils déstructurent l’object.

Vous devriez utiliser l’ historique v4 lib.

Exemple de là

 history.listen((location, action) => { console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`) console.log(`The last navigation action was ${action}`) })