在 React 中确认“返回”的导航

Question

我一直在尝试在单击“后退按钮”时向用户显示确认弹出窗口。我正在使用React Router v3，所以我不能使用 React Router v4 的<Prompt/>。

这是我想要实现的目标：

• 当用户点击“返回”或“刷新”表单上未保存的数据时，浏览器会显示一个确认弹出窗口“是”和“否”以离开或留下。

我尝试了几件事：

1) setRouteLeaveHook (React Router v3) React Router v3 doc

  componentDidUpdate() {

  ...
  if (isDirty)  // denoting that there is unsaved work
    this.props.router.setRouteLeaveHook(
      this.props.route,
      () => { return 'Unsaved data will be lost' }
    );
  }

• 在这种情况下，我用withRouter 包装了我的组件，这样我就可以访问this.props.router
• 我无法实现我的目标，因为我执行了以下操作
  1. 尝试从www.website.com/about 到www.website.com 单击“返回”
  2. 弹出消息显示，我单击“否”以留在同一页面上
  3. 虽然内容（组件）相同，但url改回www.website.com

2) 'beforeunload' 和 'popstate'

  componentDidUpdate() {

  ...
    if (isDirty)  // denoting that there is unsaved work
      window.addEventListener('beforeunload', this.handleBeforeUnload);
      window.addEventListener('popstate', this.handleOnPopState);
    }
  }

  handleBeforeUnload = e => {
    e.preventDefault();
    const msg = 'Are you sure?';
    e.returnValue = msg;
    return msg;
  }

  handleOnPopState = e => {
    e.preventDefault();
    // how can I prevent here?
  }

• 这里会弹出确认消息，当我尝试reload 时，它应该会正常工作。
• 但是，当我单击返回按钮时，没有确认也不会阻止“返回”。

防止用户意外导航的最佳方法是什么？ 任何帮助或建议表示赞赏！

附言我无法升级到 React Router v4

Answer 1

如果有人遇到同样的问题，请在此处参考我的解决方案：

Detecting user leaving page