在 react-router/redux 之前显示自定义对话框 setRouteLeaveHook 或 history.listenBefore？

Question

我似乎无法弄清楚如何显示自定义对话，而不是使用routeWillLeave 和history.listenBefore 使用的普通window.confirm。基本上我已经建立了一个通知系统并检查表单是否脏const { dispatch, history, dirty } = this.props;

如果表单是脏的，这意味着用户有未保存的更改。如果他们改变路线，我想显示我的通知，其中有两个按钮 STAY、IGNORE，它们都可以使用 onClick 处理程序。

我花了一些时间在谷歌上搜索，但没有提到我如何使用routeWillLeave 完成此任务。我能找到的最接近的方法是使用 history.listenBefore 但是有文档说我需要这样做。

let history = createHistory({
  getUserConfirmation(message, callback) {
    callback(window.confirm(message)) // The default behavior
  }
})

但我正在使用 react-router 中的 browserHistory 来启动我的商店 const history = syncHistoryWithStore(browserHistory, store);

如何在单击链接后停止路线更改，使用我的自定义通知系统显示通知，并根据单击的按钮转换到新路线还是停留？

这是一个示例，说明我的通知系统如何工作以及我前进的方向显然不起作用，因为所有这些返回都是一个字符串，默认情况下显示在 window.confirm 对话中。

history.listenBefore((location) => {
  if(this.props.dirty){
    const acceptBtn = {
      title: 'STAY',
      handler: ignoreRouteChange() //This can be any function I want
    }
    const denyBtn = {
      title: 'IGNORE',
      handler: continueRouteChange() //This can be any function I want
    }
    return dispatch(addNotification({
      message: 'You have unsaved changes!',
      type: NOTIFICATION_TYPE_WARNING,
      duration: 0,
      canDismiss: false,
      acceptBtn,
      denyBtn
    }));
    return "Usaved changes!"
  }
});

谢谢

Answer 1

我决定使用的另一个解决方案是在正常的 setRouterLeaveHook 回调中返回 false，然后显示我的对话框并使用传递给回调的 nextLocation 根据按钮选择推送下一条路由。

router.setRouteLeaveHook(route, this.routerWillLeave.bind(this));

routerWillLeave(nextLocation){
  let { dirty, dispatch, resetForm } = this.props;
  if (dirty) {
    let dialog = {
      id: Date.now(),
      showTitle: true,
      titleContent: 'Unsaved Changes',
      titleIcon: 'fa fa-warning',
      content: <span>You have <strong>unsaved</strong> changes! <strong>Discard</strong> them?</span>,
      type: 'confirm',
      handleCloseClick: (e) => {
        e.preventDefault();
        dispatch(closeDialog());
      },
      acceptBtn: {
        title: 'Okay',
        handler: (e) => {
          e.preventDefault();
          resetForm();
          // Wait for call stack to unwind and then execute
          // the following which will now have the updated values.
          setTimeout(() => {
            dispatch(push(nextLocation));
            dispatch(closeDialog());
          }, 0);
        }
      },
      denyBtn: {
        title: 'Deny',
        handler: (e) => {
          e.preventDefault();
          dispatch(closeDialog());
        }
      }
    }
    dispatch(addDialogWindow(dialog));
    dispatch(openDialog(false, (e) => dispatch(closeDialog()), false));
    return false;
  }
  return true;
}