在react-routerv3中，我一直在router.setRouteLeaveHook检查表单是否有未保存的更改，如果有则返回false以防止过渡。然后，我将显示一个带有3个按钮的自定义引导模式对话框：“保存更改”，“放弃更改”和“停留在这里”。
我无法使用react-routerv4的Prompt组件来执行此操作，因为无法自定义浏览器确认对话框中显示的按钮。似乎他们放弃了任何取消过渡的方法，而只允许您在浏览器的“确认”对话框中要求用户批准过渡。
我尝试查找代码，Prompt但只是将对话框消息传递给history，所以这对我如何设置v3样式的路由离开挂钩没有任何意义。
甚至有可能还是react-router出于某种原因开发人员有意决定取消此功能？
根据历史记录包docs，您可以window.confirm用任何喜欢的东西代替：
默认情况下，window.confirm用于向用户显示提示消息。如果您需要覆盖此行为（或者如果您使用的是createMemoryHistory（不假定DOM环境），请在创建历史记录对象时提供getUserConfirmation函数。
因此，如果您想使用自己的对话框，则应通过以下方式进行操作：
const history = createHistory({
getUserConfirmation(message, callback) {
showMyCustomDialog(message)
.then(result => callback(result === 'The YES button'))
}
})
这意味着getUserConfirmation您设置的所有消息都是为整个会话设置的，但是您可以将其抽象到导航阻止层，该层包含对话框的其他详细信息，例如标题，按钮文本，颜色等。
或者，您可以劫持该message参数并将其用于对话框配置，尽管这可能有点讨厌。但这不是一个完美的系统，因此您所做的任何事情都可能会有点骇人听闻。
当您创建路由器时，React Router v4允许您通过此方法（请参见此处）：
<BrowserRouter getUserConfirmation={yourConfirmationFunction} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句