使用 react-router 检测用户离开页面

小编典典

使用 react-router 检测用户离开页面

all

我希望我的 ReactJS 应用程序在离开特定页面时通知用户。特别是提醒他/她执行操作的弹出消息：

“更改已保存，但尚未发布。现在做吗？”

我应该在全球范围内触发它react-router，还是可以从反应页面/组件中完成？

我还没有找到关于后者的任何东西，我宁愿避免第一个。当然，除非它是常态，但这让我想知道如何在不必向用户可以访问的所有其他可能页面添加代码的情况下做这样的事情。

欢迎任何见解，谢谢！

阅读 183

2022-08-02

共1个答案

小编典典

react-routerv4 引入了一种使用Prompt. 只需将其添加到您要阻止的组件中：

import { Prompt } from 'react-router'

const MyComponent = () => (
  <>
    <Prompt
      when={shouldBlockNavigation}
      message='You have unsaved changes, are you sure you want to leave?'
    />
    {/* Component JSX */}
  </>
)

这将阻止任何路由，但不会阻止页面刷新或关闭。要阻止它，您需要添加它（根据需要使用适当的 React 生命周期进行更新）：

componentDidUpdate = () => {
  if (shouldBlockNavigation) {
    window.onbeforeunload = () => true
  } else {
    window.onbeforeunload = undefined
  }
}

onbeforeunload有多种浏览器支持。

2022-08-02