使用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具有浏览器的各种支持。

Answer 2

对于react-router2.4.0+

注意：建议将所有代码迁移到最新版本，react-router以获取所有新功能。

按照react-router文档中的建议：

一个应该使用withRouter更高阶的组件：

我们认为，这种新的HoC更好，更轻松，并且将在文档和示例中使用它，但这并不是转换的硬性要求。

作为文档中的ES6示例：

import React from 'react'

import { withRouter } from 'react-router'

const Page = React.createClass({

  componentDidMount() {

    this.props.router.setRouteLeaveHook(this.props.route, () => {

      if (this.state.unsaved)

        return 'You have unsaved information, are you sure you want to leave this page?'

    })

  }

  render() {

    return <div>Stuff</div>

  }

})

export default withRouter(Page)