javascript - React Router 获取 Prompt 或 history.block 的结果

Question

我正在使用 React-Router 的 Prompt在离开页面之前显示确认对话框。他们使用 history package 中的 history.block 实现了 Prompt ，它使用浏览器的默认对话框。问题是许多浏览器会显示“阻止此页面创建其他对话框”选项，当用户单击此选项时，任何会启动提示对话框的操作都会被完全忽略(单击时不会发生任何事情)。

我正在尝试实现一种解决方法，该解决方法需要我获取提示的结果，或者获取 history.block 的结果。有没有办法在使用 history.block 创建的对话框上进行选择后立即执行操作？

Answer 1

您可以选择不使用 Prompt 并自己使用 history.block 方法来执行一些相关操作，例如创建自定义弹出窗口/模式以在用户尝试返回时提醒用户。不要忘记在卸载时或在使用任何路由方法之前解锁它。

import React, { useEffect, useRef } from "react";
import Modal from "/location/to/modal"

function Component({ history }) {

  const [isShowModal, changeModalVisibility] = React.useState<boolean>(false)
  const unblockHandle = useRef<any>();

  useEffect(() => {
    unblockHandle.current = history.block((targetLocation: any) => {
      // take some custom action here
      // i chose to show my custom modal warning user froim going back
      // rather than relying on the browser's alert
      handleShowModal()
      return false;
    });
    return function () {
      unblockHandle.current.current && unblockHandle.current.current()
    }
  })

  function handleShowModal() {
    changeModalVisibility(true)
  }
  function onCancel() {
    changeModalVisibility(false)
  }

  function handleConfirm() {
    if (unblockHandle) {
      unblockHandle.current()
    }
    // navigate to some other page or do some routing action now
    // history.push("/any/other/path")
  }

  return (
    // some modal here
    <Modal show={isShowModal} onCancel={onCancel} onConfirm={handleConfirm} />
  );
}