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

Muh*_*ash 10 javascript reactjs react-router react-router-dom

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

Muh*_*ash 9

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

  1. useCallbackPrompt
  2. useBlocker

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

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

我如何在组件中使用 useCallbackPrompt 我使用 useCallbackPrompt 钩子的组件

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

这是现场演示链接

这是GITHUB REPO 链接

帖子链接