Question

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

功能：

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

在我的页面中：

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

this.props.showModal('confirm')成功激活模态，但在模态后面页面仍会转换 - 如何在单击模态中的按钮之前阻止转换？

Answer 1

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

当然，只要当前网址停留在您的应用中，您就可以使用react-router的历史记录来控制它。例如，您可以在导航上执行以下操作：

允许导航而无需确认
立即导航回上一个位置，但现在顶部有一个模态
当用户点击模态中的按钮时，导航真实。

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

Answer 2

使用：

this.unBlock = this.props.history.block((location, navigateToSelectedRoute) => {
  // save navigateToSelectedRoute eg this.navigateToSelectedRoute = 
  // navigateToSelectedRoute;
  // use this.navigateToSelectedRoute() afterwards to navigate to link
  // show custom modal using setState
});

，当解除阻止后，请调用this.unBlock()删除监听器。

Documentation here for history api

React-Router v4 - 使用函数防止转换

2 个答案: