Prevent react-router history.push from reloading current route

Question

I\'m taking my first steps with react-router.

I\'m currently using the hashHistory for development purposes and I\'m performing \'manual\' nav

Answer 1

My guess is that your component re-renders because something in your prop changes when you make a router push. I suspect it might be the action or key properties of prop.location. You could always check all the values of prop during each render to see what changes.

You can solve this issue by comparing your old route path with the new one in the shouldComponentUpdate life-cycle method. If it hasn't changed you are on the same route, and you can prevent the re-rendering by returning false. In all other cases, return true. By default this always returns true.

shouldComponentUpdate: function(nextProps, nextState) {
  if(this.props.route.path == nextProps.route.path) return false;
  return true;
}

You'll have to make further checks as well as this will prevent your component from updating on state updates within the component as well, but I guess this would be your starting point.

Read more about shouldComponentUpdate on the official react docs page.

Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.