How to access history.listen in a React component?

react-router react-router-redux
Andrew Rasmussen picture Andrew Rasmussen · Nov 21, 2016 · Viewed 21.2k times · Source

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

Andrew Rasmussen picture Andrew Rasmussen · Nov 21, 2016

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!

Related questions

React-Router External link

Since I'm using react-router to handle my routes in a react app, I'm curious if there is a way to redirect to an external resource. Say someone hits: example.com/privacy-policy I would like it to redirect to: example.zendesk.…

Read More
Detect Route Change with react-router

I have to implement some business logic depending on browsing history. What I want to do is something like this: reactRouter.onUrlChange(url => { this.history.push(url); }); Is there any way to receive a callback from react-router when the …

Read More
react-router scroll to top on every transition

I have an issue when navigating into another page, its position will remain like the page before. So it won't scroll to top automatically. I've also tried to use window.scrollTo(0, 0) on onChange router. I've also used scrollBehavior to fix …

Read More