javascript - 后退按钮的确认框 - ReactJs

Question

我已将以下代码用于浏览器后退按钮单击的确认框。我正在使用没有哈希的路由。

window.history.pushState(null, null, window.location.pathname);
window.addEventListener("popstate", this.onBackButtonClick);

  onBackButtonClick = (event) => {
    debugger;
    event.preventDefault();
    this.goBackButtonHandler();
  };

 goBackButtonHandler = () => {
    if (this.state.isEditDirty) {
      this.setState({ showDirtyDialog: true });
    } else {
      window.history.back();
    }
  };

我面临以下两种情况

1. 我为文本字段脏了多次绑定 pushstate 和 popstate。因此，当我单击浏览器后退按钮时，历史记录会更改，但 url 不会更改。
2. 当我在用户输入文本字段时只绑定一次时，解决方案按预期工作。但是第一次显示确认框并防止返回。第二次，即使是确认框也显示在后面加载的页面。

标签： javascriptreactjs