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. 点击“{1}}到www.website.com/about
2. 弹出消息显示，我点击“否”以保持同一页面
3. 虽然内容（组件）相同，但网址会更改回www.website.com

2）'beforeunload'和'popstate'

www.website.com

此处，当我尝试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? }时，会弹出确认消息并按原样运行。
然而，当我点击后退按钮时，没有确认也不会阻止“返回”。

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

P.S。我无法升级到React Router v4

Answer 1

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

Detecting user leaving page

确认React中“返回”的导航

1 个答案: