当用户试图离开站点时，在react-router dom中发出警告

Question

我有一个多步向导，每一步都有一个反应路由器路由。

目前，如果用户导航到外部链接，他们将失去所有状态。

在react-router-dom或react-router中是否有一个catch我可以警告用户并允许他们取消？

Answer 1

有一个组件。在这里查看提示组件：     https://reacttraining.com/react-router/core/api/Prompt

以下是他们使用的示例：

<Prompt
    when={formIsHalfFilledOut} // <- function that returns boolean
    message="Are you sure you want to leave?"
/>

Answer 2

我认为您正在寻找React Router的历史API下的阻止转换。

根据反应路由器历史记录github页面上的示例：

您可以注册一个简单的提示消息，该消息将显示在 用户离开当前页面之前。

const unblock = history.block('Are you sure you want to leave this page?')

https://github.com/ReactTraining/history#properties

的详细信息