How to Stop user going back from receipt page using browser back button?

Question

I am implementing a checkout in React and I am using react router. Now the issue is if my user places the order successfully a receipt page shows up. However, user is able to go back to checkout page again by pressing browser back button.

I want if the user presses browser back button while they are on the receipt page, they should either stay on receipt page or redirects to profile page.

Currently, I am handling it using some localstorage checks. I setitem in local storage on successful checkout and as soon as receipt page loads I delete it. On checkout page I am using this condition.

useEffect(() => {
  getMyInfo();
  if (localStorage.getItem("sessipn")) {
  } else {
    history.push({ pathname: `/receipt/${orderid}` });
  }
}, []);

So, when user presses back button it redirects them to receipt page because there's no session in localstorage.

I feel this implementation is poor. Any better answers.

Answer 1

Use history.replace instead of history.push : https://reactrouter.com/web/api/history