Question

我试图在我的Redux应用中收听网址更改。如果您在尝试更改路线时表单上有未保存的数据，我希望显示自定义警告消息。如果用户选择取消，我希望不改变路线。这是如何完成的？

我看到getUserConfirmation。这些示例表明它需要一条消息和一个回调。但我的代码要求零参数和void返回类型。

如何拦截路由事件？

Answer 1

问题是TypeScript的定义与底层代码不匹配。

所以我使用了我的神奇骨架键来处理TypeScript：any！

像这样设置：

<Router getUserConfirmation={getUserConfirmation}>

然后我做了类似以下的事情：

const getUserConfirmation: any = (message: string, callback: (answer: boolean) => void) => {
  ReactDOM.render(
    <MyCustomDialog
      onOkClicked={buildOkClicked(callback)}
      onClose={buildCloseModal(callback)}
      onClose={buildCloseModal(callback)}
    />,
    someDiv
  )
}

const buildCloseModal = (callback: (answer: boolean) => void) => {
  return () => {
    closeModal()
    callback(false)
  }
}

const buildOkClicked = (callback: (answer: boolean) => void) => {
  return () => {
    closeModal()
    callback(true)
  }
}

const closeModal = () => {
  ReactDOM.render(
    <div />,
    someDiv
  )
}

这里的关键是在声明getUserConfirmation时，使用“：any”来解决任何编译问题

react-router-dom BrowserRouter的自定义未保存数据警告

1 个答案: