Javascript 反应&；MobX-当用户离开现有页面时的确认对话框

我有一些东西看起来像这样：

import React from 'react';
import PropTypes from 'prop-types';
import { Prompt } from 'react-router-dom';

const ConfirmationDialog = (props) => {
  if (props.navigatingAway) {
    window.onbeforeunload = () => true;
  } else {
    window.onbeforeunload = null;
  }
  return (
    <Prompt
      when={props.navigatingAway}
      message="Are you sure?"
    />
  );
};

ConfirmationDialog.propTypes = {
  navigatingAway: PropTypes.bool.isRequired,
};

export default ConfirmationDialog;

从“React”导入React；
从“道具类型”导入道具类型；
从'react router dom'导入{Prompt}；
常量确认对话框=（道具）=>{
如果（道具导航方式）{
window.onbeforeunload=（）=>true；
}否则{
window.onbeforeunload=null；
}
返回(
);
};
ConfirmationDialog.propTypes={
导航方式：PropTypes.bool.isRequired，
};
导出默认确认对话框；

我正试图找出扩展此功能的最佳方法，以便

navigatingAway

真正起作用。我不知道使用什么标准，只是在以下情况下它应该触发确认窗口：

• 用户更改URL并尝试导航离开
• 用户单击链接
• 用户刷新浏览器

---

检查

的URL更改的最佳方法是什么
 当某个场景发生时，您不需要想出一种方法来“检测”


用户更改URL并尝试导航离开
用户刷新浏览器

通过将回调分配给
onbeforeunload
，已经可以处理这些问题


用户单击链接

如果使用
react router
处理导航，则已通过呈现
提示符
来处理此问题

props.navigatingAway
，应该更好地命名为
props.shouldPreventNavigation
或类似的东西，因为它应该指示你是否应该阻止导航，而不是你是否正在导航

例如，如果您总是希望在安装
确认对话框
时在导航前显示提示，那么
props.shouldPreventNavigation
应该始终为true，您就完成了。一个常见的用例是，如果表单中存在未保存的数据，则将其设置为true


与有条件地在保护后面呈现
不同，您可以始终呈现它，但在={true}

或

时通过
来阻止或允许相应的导航

为了说明这一点，除了性能等方面，以下两个代码段在功能上是等效的：

render() {
    return (
        <Prompt
            when={this.props.navigatingAway}
            message="Are you sure?"
        />
    )
}

render（）{
返回(
)
}

render（）{
如果（此.道具.导航方式）{
返回(
)
}
返回null；
}

如果当
when={true}
时，
提示符
无法正常工作，则可能是
反应路由器
未正确管理您的路由

作为一个旁注，请确保考虑“代码>窗口”中发生的事情。OnBeEndoLoad  >例如，您的<代码>确认对话框> /代码>在安装了回调时卸载。使用适当的生命周期方法来管理它，否则当您测试它时，事情会变得很奇怪
render() {
    if (this.props.navigatingAway) {
        return (
            <Prompt
                when={true}
                message="Are you sure?"
            />
        )
    }
    return null;
}