如何在react-router v4中的后退按钮上显示模态框？

Question

如果用户单击浏览器中的后退按钮，如何显示自定义模式框。我已经有一个用于字段更改的模式框，但我不想使用 Prompt 的window.confirm.

Answer 1

1. 我的项目中有一个名为“ Confirm ”的模式框单独组件，我在其他组件中使用它，我们将其称为“ Sample ”。
2. 在我的示例组件中，我维护一个状态来管理该确认框的显示。
3. 为了检测浏览器/设备后退按钮，我在useEffect函数中添加了一个事件，如下所示。

这是我的 goBackButtonHandler 函数。

此函数检查是否有任何表单输入字段是脏的。如果是，我会显示“确认”框，或者直接返回上一页。我认为您可以在代码中使用类似的逻辑。

在我的应用程序中，我有后退和取消按钮，因此对于应用程序内导航和浏览器/设备导航，我只需进行 React History API 调用

history.goBack();

这会触发事件，如果我的字段脏了，我可以看到模态框。就是这样！希望这会有所帮助。