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]);

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]);

• javascript
• reactjs
• react-router-dom

• Did you check out my answer? Consider giving some feedback, greetings! – axtck Commented Mar 16, 2021 at 16:24

3 Answers 3

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

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

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]);

This code works fine for me :

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