How to access history.listen in a React component?

Question

I have a specific component who would like to be notified every time the user navigates. Is there some way to access the history passed into the router?

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

Child component:

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

Answer 1

I've noticed that this works:

import { browserHistory } from 'react-router';

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

But it seems like I'd want to use the actual history passed into the router rather than blindly using browserHistory. In some instances I pass in hashHistory instead. Would still appreciate a better solution!

Answer 2

Use withRouter from 'react-router' like this:

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

Following a simple component that shows the pathname of the current location. Works the same for history prop, just use history instead of location then.

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>
    )
  }
}

Create a new component that is "connected" (to borrow redux // terminology) to the router.

const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

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