Comment accéder à history.listen dans un composant React?

Question

J'ai un composant spécifique qui aimerait être averti chaque fois que l'utilisateur navigue. Y a-t-il un moyen d'accéder à l'historique passé dans le routeur?

<Router history={history}> 
    {// ...} 
</Router> 

composante enfant:

var Component = React.createClass({ 
    componentDidMount: function() { 
    // history.listen(this.onRouteChange); 
    }, 
    onRouteChange: function() {}, 
    render: function() {...}, 
}); 

Answer 1

J'ai remarqué que cela fonctionne:

import { browserHistory } from 'react-router'; 

var Component = React.createClass({ 
    componentDidMount: function() { 
    browserHistory.listen(this.onRouteChange); 
    }, 
    ... 
}); 

Mais il semble que je veux utiliser l'histoire réelle passé dans le routeur plutôt que d'utiliser aveuglément browserHistory. Dans certains cas, je passe à hashHistory à la place. J'apprécierais toujours une meilleure solution!

Answer 2

utilisation withRouter de « réagir-routeur » comme ceci:

import React from 'react' 
import PropTypes from 'prop-types' 
import { withRouter } from 'react-router' 

Après un composant simple qui montre le chemin de l'emplacement actuel. Fonctionne de la même manière pour l'histoire prop, il suffit d'utiliser l'histoire au lieu de l'emplacement alors.

class ShowTheLocation extends React.Component { 
    static propTypes = { 
    match: PropTypes.object.isRequired, 
    location: PropTypes.object.isRequired, 
    history: PropTypes.object.isRequired 
    } 

    render() { 
    const { match, location, history } = this.props 

    return (
     <div>You are now at {location.pathname}</div> 
    ) 
    } 
} 

Créer un nouveau composant qui est "connecté" (pour emprunter redux // terminologie) au routeur.

const ShowTheLocationWithRouter = withRouter(ShowTheLocation) 

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