在electron中有什么方案可以替代React Prompt来实现React路由变化时弹出确认对话框

Question

在网页端的时候我们通常用React的Prompt组件来监听location(如下代码)

 <Prompt
    message={(location) => {
    // React路由变化时，弹出提示窗
    if (location.pathname === this.getPath()) {
        // 会触发两次，屏蔽第二次结果
        return false;
    }
    if (isLeave) { //一个flag
        return true;
    }
    let leave = window.confirm("确定离开吗?");
    if (!leave) { // 取消
        this.props.history.push(this.getPath());
        return false;
    } else { // 确定
        return true;
    }
}}
/>

但是到了electron环境里面就不管用了，因为electron不支持Prompt(关于Prompt和Electron冲突的机制可以看看这个issue:https://github.com/electron/electron/issues/472)，那么在这种环境下(我的react-router-dom版本是5.1.2)有什么方案去监听React路由变化，弹出确认对话框呢？

Answer 1

一句流行的句式:先问是不是,再问怎么做
electron怎么就不支持Prompt了?

我猜可能是你用的BrowserRouter
而BrowserRouter是需要web server支持的(e.q, nginx的try_files, webpack-dev-server的historyApiFallback)
如果你的electron调用的本地html文件, 那么BrowserRouter就无效了, 建议使用HashRouter或者MemoryRouter

=============================================================
你的描述让我做了回阅读理解
window.prompt不等于react-router-dom的Prompt
实际上,如果只是要弹一个确认框的话你之前的代码完全够用了
<Prompt message="Are u sure you want to leave?" />

如果要像prompt这样拿一些用户输入的话加一点变通的方法好了
Prompt总是返回false 调用一个异步方法进行处理, 比如:

const history = useHistory();
  const [retValue, setRetValue] = useState(false);
  const confirm = async (pathname: string, action: string) => {
    if (pathname === history.location.pathname) return;
    const { response, checkboxChecked } = await remote.dialog.showMessageBox(
      remote.getCurrentWindow(),
      {
        message: `Redirect to ${pathname}`,
        checkboxLabel: "aaa",
        buttons: ["OK", "Cancel"],
      }
    );
    if (checkboxChecked && response === 0) {
      setRetValue(true);
      history.push(pathname);
    }
  };

  return (
    <div>
      <Prompt
        message={(location, action) => {
          !retValue && confirm(location.pathname, action);
          return retValue;
        }}
      />
    </div>
  );

showMessageBox客户用任何你想用的手段替换,比如一个React Dialog组件