Comment écouter les changements de route dans le routeur réagissent v4?

Question

J'ai quelques boutons qui servent de routes. À chaque changement d'itinéraire, je veux m'assurer que le bouton actif est modifié.

Existe-t-il un moyen d'écouter les changements de route dans le routeur réagit v4?

Answer 1

J'utilise withRouter pour obtenir le 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 <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/checkout" component={CheckoutPage} />
        <Route path="/success" component={SuccessPage} />
        // ...
        <Route component={NotFound} />
      </Switch>
  }
}
 

J'espère que ça aide

Answer 2

Étendre sur le dessus, vous aurez besoin d'obtenir à l'histoire de l'objet. Si vous utilisez BrowserRouter, vous pouvez importer withRouter et l'enveloppe de votre composant avec un ordre supérieur composant (ad HoC) pour avoir accès via des accessoires de l'histoire de l'objet des propriétés et des fonctions.

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

const myComponent = ({ history }) => {

    history.listen((location, action) => {
        // location is an object like window.location
        console.log(action, location.pathname, location.state)
    });

    return <div>...</div>;
};

export default withRouter(myComponent);

La seule chose à prendre en compte est que withRouter et la plupart des autres moyens d'accéder à l' history semblent polluer les accessoires qu'ils de-la structure de l'objet.

Answer 3

Vous devriez utiliser history v4 lib.

Exemple à partir 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}`)
})
 

Answer 4

Dans certains cas, vous pouvez utiliser l'attribut render au lieu de component , de cette façon:

 class App extends React.Component {

    constructor (props) {
        super(props);
    }

    onRouteChange (pageId) {
        console.log(pageId);
    }

    render () {
        return  <Switch>
                    <Route path="/" exact render={(props) => { 
                        this.onRouteChange('home');
                        return <HomePage {...props} />;
                    }} />
                    <Route path="/checkout" exact render={(props) => { 
                        this.onRouteChange('checkout');
                        return <CheckoutPage {...props} />;
                    }} />
                </Switch>
    }
}
 

Notez que si vous modifiez l’état de la méthode onRouteChange , cela peut entraîner l’erreur «Profondeur de mise à jour maximale dépassée».