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

I will give this a shot...

If you land here and looking to change your URL (for sharing purposes for example) then RR docs already has the solution described. Just make sure you do not use the history within the component (i.e. this.props.history.push())as you will be (as expected) routed to the target. You are however allowed to access your browser history without any interference with the component's history.

Following tested only on Chrome

// history.js
import { createBrowserHistory } from 'history'
export default createBrowserHistory()

and then from your XYZ component

// XYZ.js
import React from 'react';
import history from './history'

class XYZ extends React.Component {
    _handleClick() {
        // this should not cause rerender and still have URL change 
        history.push("/someloc");
    }
    render() {
        return(
          <button onClick={this._handleClick.bind(this)}>test </button>
        )
    }
}

Hope it helps someone else.

Answer 2

tsx sample

import {createBrowserHistory} from 'history';  
export const history = createBrowserHistory();


ReactDOM.render(
  <Router history={history}>
    <App/>
  </Router>,
  document.getElementById("root")
);

Answer 3

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.

Answer 4

In App.js:

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.location.search === this.props.location.search
}

Answer 5

I have the same issue and i find the (dumb) solution.

You just have a <button> (button by default is type=submit) or something similar (form, submit.... etc) thats is reloading the page like a html <form method=GET ...>.

Check it in your code, and remove it.

PD: _k=somethingRandom > this is just the value inputs (or the button) that you are sending in the form.