使用React-Router检测用户离开页面

Question

我希望我的ReactJS应用在离开特定页面时通知用户。特别是一条弹出消息，提醒他/她进行以下操作：

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

我应该在react-router全局范围内触发此操作，还是可以在react页面/组件内完成此操作？

我还没有发现任何关于后者的信息，我宁愿避免使用第一个。除非当然是其规范，否则这使我想知道如何执行这样的事情而不必向用户可以访问的所有其他可能的页面添加代码。

欢迎有任何见解，谢谢！

Answer 1

react-routerv4引入了一种使用阻止导航的新方法Prompt。只需将其添加到您要阻止的组件中即可：

import { Prompt } from 'react-router'

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

这将阻止所有路由，但不会阻止页面刷新或关闭。要阻止它，您需要添加以下代码（根据需要使用相应的React生命周期进行更新）：

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

onbeforeunload具有浏览器的各种支持。