在React ES6项目中确认导航

Question

我正在使用React和React Router与ES6类，并试图找到最佳解决方案，以防止用户在表单中保留未保存更改的页面。

在componentDidMount中，我添加了以下内容（主要基于https://github.com/mjackson/history/blob/master/docs/ConfirmingNavigation.md）：

import { browserHistory } from 'react-router'    
browserHistory.listenBefore(function (location) {
   if (this.state.isDirty)
       return 'Are you sure you want to leave this page?'
})

this.history = useBeforeUnload(createHistory)()
this.history.listenBeforeUnload( () => {
    if (this.state.isDirty)
       return "You have pending changes."
})

两个问题：

1）这有效，但这是实现目标的正确方法（用户在未保存的情况下尝试离开页面）？特别是我正在为beforeunload创建一个新的历史 2）离开页面时，如何删除监听器？我可以看到，例如，每次我重新进入页面时，都会添加一个用于beforeunload事件的新监听器。