score:2

you cannot prevent it completely but you can control it with the access to history.listen function.

with react-router 4 you can wrap top level components using the hoc withrouter.

export default withrouter(connect(mapstatetoprops, mapdispatchtoprops)(app));

this allows accessing this.props.history and controlling it

  class app extends component {
  constructor(props) {
    super(props);

    this.props.history.listen((location, action) => {
      //here you can control the location change
    });
  }

  render() {
     return (
         </div>
      );
  }
}

and you also have the listenbefore event on the history object and you can use this event to control the navigation and add your own custom navigation logic:

history.listenbefore( (location, done) => dosomething(location).then(done) )

Related Query

More Query from same tag