React router callback when leaving the page - reactjs

Question

I want to know if the user is leaving the page
I tried :
componentWillMount() {
this.props.router.setRouteLeaveHook(
this.props.route,
this.routerWillLeave
)
},
But I get :
this.props.router is undefined
I saw some solutions, but I don't want to use this react way :
React.createClass
Version of react-router :
"react-dom": "^16.3.1",
"react-router-dom": "^4.2.2",
And how I implemented the router :
root.jsx
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 )
});
app.jsx
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>
)
};
EDIT :
I tried with :
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)
But I get the same error

Answer 1

You can get history off context or create it outside the Router and pass it in as a history prop.