javascript-react-router v4：防止使用自定义钩子而不是提示进行过渡

在react-router v3中,我一直在使用router.setRouteLeaveHook来检查表单是否有未保存的更改,如果是,则返回false以防止过渡.然后,我将显示一个带有3个按钮的自定义引导模式对话框：“保存更改”,“放弃更改”和“停留在这里”.

我无法使用react-router v4的Prompt组件执行此操作,因为无法自定义浏览器确认对话框中显示的按钮.似乎他们放弃了取消过渡的任何方法,而只允许您在浏览器的“确认”对话框中要求用户批准过渡.

我尝试在代码中查找Prompt,但代码为it just passes the dialog message to history,所以这对我如何设置v3样式的路由离开挂钩没有任何想法.

反应路由器开发者是否甚至有可能还是出于某种原因有意决定删除此功能？

解决方法:

根据the history package docs,您可以用任何您喜欢的东西替换window.confirm：

By default, window.confirm is used to show prompt messages to the user. If you need to override this behavior (or if you’re using createMemoryHistory, which doesn’t assume a DOM environment), provide a getUserConfirmation function when you create your history object.

因此,如果您想使用自己的对话框,类似的内容应该可以帮助您：

const history = createHistory({
  getUserConfirmation(message, callback) {
    showMyCustomDialog(message)
      .then(result => callback(result === 'The YES button'))
  }
})

这意味着您设置的任何getUserConfirmation消息都是为整个会话设置的,但是您可以将其抽象到包含对话框的其他详细信息的导航阻止层,例如标题,按钮文字,颜色等

或者,您可以劫持message参数并将其用于对话框配置,尽管这听起来可能有点讨厌.但这不是一个完美的系统,因此您所做的任何事情都可能会有点麻烦.

当您创建路由器时,React Router v4允许您通过此方法(请参见here)：

<BrowserRouter getUserConfirmation={yourConfirmationFunction} />

标签：history-js,html5-history,react-router,javascript
来源： https://codeday.me/bug/20191111/2020573.html