history.push using react-router-dom

Question

I am navigating from one page to another using history.push which is available from below

import { withRouter } from 'react-router-dom

I am able to navigate properly but i have a requirement that if i move from Page A to Page B, i should not be allowed to go back to previous page using Browser back button.

I know this can be achieved by window.redirect but i dont want to use that. The problem with that is the entire state and redux store information is lost. Does anyone know if i can use withRouter and still be able to achieve the requirement above.

user_4148902 · Answer

You could use the history.replace('/Whatever_screen') to replace the current page in the stack.

replace(path, [state]) - (function) Replaces the current entry on the history stack.

Second option:

You could use the below code to block the user to going back in the history.

 componentDidMount() {
    const { history } = this.props;
    window.onpopstate = function (event) {
      history.go(1);
    };
  }

Working Example:

MDN reference here:

There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.

history.push using react-router-dom

1 Answers