Reactjs 离开页面时响应路由器回调

我想知道用户是否正在离开页面

我试过：

componentWillMount() {
  this.props.router.setRouteLeaveHook(
    this.props.route,
    this.routerWillLeave
  )
},

但我得到：

此.props.router未定义

我看到了一些解决方案，但我不想用这种方式：

React.createClass

react路由器的版本：

"react-dom": "^16.3.1",
"react-router-dom": "^4.2.2",

我是如何实现路由器的：

root.jsx

---

但是我得到了相同的错误

您可以从上下文中获取历史记录，或者在路由器外部创建历史记录，并将其作为历史记录道具传入。

请检查副本，因为您使用的是react Router v4，您需要使用Prompt，如果仍然无法解决您的问题，请告诉我problem@ShubhamKhatri如果我理解得好的话，提示用于在用户离开页面时显示警报。我不想那样。我想在用户离开页面时执行一些代码。我在这里更新了我的答案，请检查请编辑@Xero的代码并将其作为答案写入。如果没有代码，您的答案将不清楚。

import React from 'react'
import ReactDOM from 'react-dom'
import { App } from '../components/app'
import { BrowserRouter } from 'react-router-dom'

// Render component with data
document.addEventListener('DOMContentLoaded', () => {

    const node = document.getElementById('app');

    ReactDOM.render(
        (<BrowserRouter>
            <App />
        </BrowserRouter>),
        node )
});

import React from 'react'

import CompanyList from './company/company_list'
import CompanyDetails from './company/company_details'
import { CompanyNew } from "./company/company_new";
import { Error404 } from "./common/error_404";

import { Route, Switch } from 'react-router-dom'

export const App = () => {
    return (
        <Switch>
            <Route path='/' exact component={CompanyList}/>
            <Route path='/companies' component={CompanyList}/>
            <Route path='/company/new' component={CompanyNew}/>
            <Route path='/company/:id' component={CompanyDetails}/>
            /* 404 if not found : */
            <Route component={Error404}/>
        </Switch>
    )
};

import { withRouter } from 'react-router'

class CompanyDetails extends React.Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.router.setRouteLeaveHook(
            this.props.route,
            this.routerWillLeave
        )
    }
}

export default withRouter(CompanyDetails)