Подтвердите навигацию «Вернуться» в React

Question

Я пытался показать пользователям всплывающее окно с подтверждением при нажатии кнопки «Назад». Я использую React Router v3, поэтому я не могу использовать <Prompt/> React Router v4.

Вот чего я хотел бы достичь:

• когда пользователь нажимает «вернуться» или «обновить» с несохраненными данными в форме, браузер отображает всплывающее окно с подтверждением «Да» и «Нет», чтобы оставить или остаться.

Я пробовал несколько вещей:

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.
• Однако, нет подтверждения, и это не мешает «вернуться», когда я нажимаю кнопку «Назад».

Каков наилучший способ предотвращения случайной навигации со стороны пользователей? Любая помощь или предложение приветствуется !!

p.s. Я не могу перейти на React Router v4

Answer 1

Если у кого-то возникла такая же проблема, обратитесь к моему решению здесь:

Обнаружение пользователя, покидающего страницу