We have two types of pages on our website – react pages and iframe pages (in django template).

We are handling redirection from iframe pages to react pages through window.postMessage.

In django template javascript code:

window.parent.postMessage(JSON.stringify(postData), "https://" + main_domain);

In react code:

let { name } = useParams();

useEffect(() => {
  function handleMessage(e, originName) {
    if (originName === "from_iframe") {
      props.history.push("next_url");
    }
  }
  
  if (name === "current_url") {
    window.addEventListener("message", e => handleMessage(e, "from_iframe"), false);
  }
}, [name]);

The problem is that the browser stack is behaving in a very weird manner. After first redirection, it takes 2 clicks to go back. Next, it takes 4 clicks and then 6 clicks.

On using history.replaceState, it works perfectly on first redirection. But after that, it goes back multiple pages instead of one.

Please let me know if there is any known solution to this problem or some other approach we can try. Also, please mention if there is any other information needed.