使用react-router-dom v6.0.2检测用户离开页面

Question

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

Answer 1

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

useCallbackPrompt挂钩 该挂钩处理弹出窗口，以根据特定条件显示、隐藏和更新位置。看起来怎么样。

useBlocker Hook 如果有任何更改，此钩子会阻止用户导航离开

我如何在组件中使用 useCallbackPrompt

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