javascript - 如何将自定义组件与 react-router 路由转换一起使用？

Question

文章Confirming Navigation说明如何在转换 Hook 中使用浏览器确认框。美好的。但我想使用我自己的对话框。如果我要使用 history 模块中的方法，我认为这是可能的。是否可以使用 react-router 中的 setRouteLeaveHook 来做到这一点？

Answer 1

核心问题是setRouteLeaveHook 期望钩子(Hook)函数同步 返回它的结果。这意味着您没有时间显示自定义对话框组件、等待用户单击一个选项，然后然后返回结果。所以我们需要一种方法来指定一个异步 钩子(Hook)。这是我写的实用函数:

// Asynchronous version of `setRouteLeaveHook`.
// Instead of synchronously returning a result, the hook is expected to
// return a promise.
function setAsyncRouteLeaveHook(router, route, hook) {
  let withinHook = false
  let finalResult = undefined
  let finalResultSet = false
  router.setRouteLeaveHook(route, nextLocation => {
    withinHook = true
    if (!finalResultSet) {
      hook(nextLocation).then(result => {
        finalResult = result
        finalResultSet = true
        if (!withinHook && nextLocation) {
          // Re-schedule the navigation
          router.push(nextLocation)
        }
      })
    }
    let result = finalResultSet ? finalResult : false
    withinHook = false
    finalResult = undefined
    finalResultSet = false
    return result
  })
}

这是一个如何使用它的例子，使用 vex显示对话框:

componentWillMount() {
  setAsyncRouteLeaveHook(this.context.router, this.props.route, this.routerWillLeave)
}
​
routerWillLeave(nextLocation) {
  return new Promise((resolve, reject) => {
    if (!this.state.textValue) {
      // No unsaved changes -- leave
      resolve(true)
    } else {
      // Unsaved changes -- ask for confirmation
      vex.dialog.confirm({
        message: 'There are unsaved changes. Leave anyway?' + nextLocation,
        callback: result => resolve(result)
      })
    }
  })
}