使用REACT-ROUTER-DOM v6.0.2检测用户离开页面

Detecting user leaving page with react-router-dom v6.0.2(使用REACT-ROUTER-DOM v6.0.2检测用户离开页面)

问题描述

在导航到ReactJS Web应用程序中的其他路线或页面之前，我正在尝试显示未保存更改的对话框。我尝试了与Stackoverflow不同的解决方案，但没有成功。大多数解决方案都与旧版本有关。我需要版本6.0.2(REACTION-ROUTER-DOM)。任何能在这方面帮助我的人都非常感激。

推荐答案

如何解决我的问题？ 我没有降级，而是创建了两个自定义挂钩。

1. useCallbackPrompt挂钩
2. useBlocker挂钩

useCallbackPrompt挂钩 此挂钩处理弹出窗口，以根据特定条件显示和隐藏并更新位置。 它看起来是什么样子。

使用拦截器挂钩 如果有任何更改，此挂钩将阻止用户导航离开

如何在组件中使用useCallback Prompt

我创建了状态showDialog；如果用户在当前页面/表单上更改了某些内容，它将更新状态showDialog，如果用户尝试离开，将显示提示，并询问用户是否要留下来。

这里是Live Demo Link

这里是GITHUB REPO LINK

Post的链接

这篇关于使用REACT-ROUTER-DOM v6.0.2检测用户离开页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！