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

2022-08-09 00:00:00 reactjs javascript react-router react-router-dom
在导航到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的链接

相关文章