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

问题描述

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

这是我想要实现的目标：

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

我尝试了几件事：

1) setRouteLeaveHook (React Router v3) React Router v3 文档

  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。
但是，当我单击后退按钮时，没有确认也不会阻止“返回”。

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

ps 我无法升级到 React Router v4

标签： javascriptreactjsreact-router

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

问题描述

解决方案

推荐阅读