How to stop browser back button using react js hooks and history api?

user_10042206 0
Viewed 2688

I'm trying to disable back button after successful login into the application but couldn't make it. I'm using react router dom 5.2.0 for routing. Currently, I'm redirecting to login page if someone clicks to browser back button but I need to block the back button.

useEffect(() => {
  return () => {
    if (history.action === "POP") {
      history.replace('/login');
    }
  };   
}, [history]);
react-router-dom reactjs javascript
3 Answers

There is no way to fully disable the browsers back button, you can only prevent it from going back like you are doing.

When you are doing this, don't forget to listen for events on history, try this out:

useEffect(() => {
  return history.listen(() => { // listen
    if (history.action === "POP") {
      history.replace("/login");
    }
  });
}, [history]);
user_123789230

This code works fine for me :

useEffect(() => {
    return () => {
        if (history.action === 'POP') {
            history.go(1);
        }
    };
}, [history]);
user_167950340

Here is how you can stop the browser's back button

  history.pushState(null, null, location.href);
   window.onpopstate = function(event) {
    history.go(1);
  };
user_72928980
Related