Reactjs React路由器v4-使用功能防止转换

我能够根据阻止导航，但我正在尝试连接一个函数，以便可以使用模态而不是警报

功能：

abandonForm = (route) => {
  this.props.showModal('confirm');
  console.log('leaving..');
}

在我的页面中：

<NavigationPrompt when={true} message={(location) => this.abandonForm('confirm')} />

this.fallowForm（'confirm'）}/>

---

this.props.showmodel（'confirm'）

成功激活了模式，但在模式后面，页面仍在转换-在单击模式中的按钮之前，如何防止转换

浏览器只允许通过您提到的警告框取消导航。这种限制的动机是钓鱼/诈骗网站，这些网站试图使用javascript噱头创造用户体验，令人信服地模仿浏览器或操作系统会做的事情（用户信任的人）。即使是警告框中显示的文本格式也是经过精心设计的，因此很明显，它来自网站

当然，只要当前URL位于应用程序中，您就可以使用

react router

的历史记录对其进行控制。例如，您可以在导航上执行以下操作：

• 允许在没有确认的情况下导航
• 立即导航回上一个位置，但现在顶部有一个模态
• 当用户单击模式中的按钮时，可实时导航

这种方法的缺点（忽略了它的复杂性）是，如果用户试图完全导航到另一个站点，将无法获得确认对话框。

使用：

this.unBlock=this.props.history.block（（位置，navigateToSelectedRoute）=>{
//保存navigateToSelectedRoute，例如this.navigateToSelectedRoute=
//导航选定路线；
//之后使用此.navigateToSelectedRoute（）导航到链接
//使用setState显示自定义模式
});

取消阻止完成后，调用

this.unBlock（）

删除侦听器

---

这是有道理的-我的目标只是警告用户浏览此应用程序。React路由器似乎允许

消息

成为确认对话框的消息或功能-我的问题是如何阻止导航，直到我可以从模式返回true或false。

消息

可能只是一个功能，以便动态生成消息文本。除非发生异步事件，否则无法阻止导航。啊，好的。。我想我误解了这里的目的，谢谢。@StefanDragnev你介意分享这个“浏览器只允许通过警告框取消导航”的来源吗？