如何使用带有 react-router 路由转换的自定义组件? [英] How to use a custom component with react-router route transitions?

问题描述

文章确认导航解释了如何在过渡挂钩中使用浏览器确认框.美好的.但我想使用我自己的对话框.如果我要使用 history 模块中的方法，我认为这是可能的.是否可以使用 react-router 中的 setRouteLeaveHook 来做到这一点?

The article Confirming Navigation explains how to use a browser confirmation box in your transition hook. Fine. But I want to use my own Dialog box. If I were to use the methods from the history module I think this is possible. Is it possible to do this with the setRouteLeaveHook in react-router?

推荐答案

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

The core problem is that setRouteLeaveHook expects the hook function to return its result synchronously. This means you don't have the time to display a custom dialog component, wait for the user to click an option, and then return the result. So we need a way to specify an asynchronous hook. Here's a utility function I wrote:

// 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来显示一个对话框:>

Here is an example of how to use it, using vex to show a dialog box:

componentWillMount() {
  setAsyncRouteLeaveHook(this.context.router, this.props.route, this.routerWillLeave)
}
​
routerWillLeave() {
  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)
      })
    }
  })
}

这篇关于如何使用带有 react-router 路由转换的自定义组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！