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

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

react-router

v4引入了一种使用阻止导航的新方法

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?'    />    {}  </React.Fragment>)

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

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

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