Comment détecter les changements de route avec react-router v4?

Question

Je dois détecter si un changement de route s'est produit afin de pouvoir transformer une variable en true.

J'ai parcouru ces questions:
1. https://github.com/ReactTraining/react-router/issues/3554
2. Comment écouter les changements de route dans réagir routeur v4?
3. Détecter le changement d'itinéraire avec react-router

Aucun d'entre eux n'a fonctionné pour moi. Existe-t-il un moyen clair d’appeler une fonction lorsqu’un changement d’itinéraire se produit.

Answer 1

Une solution consiste à utiliser le composant withRouter d'ordre supérieur.

Démonstration en direct (cliquez sur les liens hypertexte pour modifier les itinéraires et afficher les résultats dans la console affichée)

Vous pouvez accéder aux propriétés de l'objet d'historique et à la correspondance la plus proche via le composant d'ordre supérieur withRouter. withRouter transmettra les accessoires de correspondance, d'emplacement et d'historique mis à jour au composant encapsulé à chaque restitution.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

import {withRouter} from 'react-router-dom';

class App extends Component {
    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            console.log('Route change!');
        }
    }
    render() {
        return (
            <div className="App">
                ...routes
            </div>
        );
    }
}

export default withRouter(props => <App {...props}/>);

---

Un autre exemple qui utilise les paramètres url:

Si vous changiez les itinéraires de profil de /profile/20 à /profile/32

Et votre itinéraire a été défini comme /profile/:userId

componentDidUpdate(prevProps) {
    if (this.props.match.params.userId !== prevProps.match.params.userId) {
        console.log('Route change!');
    }
}

Answer 2

React utilise une architecture basée sur les composants. Alors, pourquoi n'obéissons-nous pas à cette règle?

Vous pouvez voir DEMO .

Chaque page doit être entourée d'un HOC, cela détectera le changement de page automatiquement.

Accueil

import React from "react";
import { NavLink } from "react-router-dom";
import withBase from "./withBase";

const Home = () => (
  <div>
    <p>Welcome Home!!!</p>
    <NavLink to="/login">Go to login page</NavLink>
  </div>
);

export default withBase(Home);

withBase HOC

import React from "react";

export default WrappedComponent =>
  class extends React.Component {
    componentDidMount() {
      this.props.handleChangePage();
    }

    render() {
      return <WrappedComponent />;
    }
  };

Answer 3

Pourquoi ne pas suivre la longueur de l'objet d'historique dans votre état d'application? L'objet historique fourni par react-router augmente en longueur chaque fois qu'un nouvel itinéraire est traversé. Voir l'image ci-dessous.

 

ComponentDidMount et ComponentWillUnMount check: