React-router: setRouteLeaveHook and 4.0's NavigationPrompt doesn't work on iOS Safari at all

[kdenz]

Version

3.0.0 + 4.0.0

For 3.0.0, I used this:

   componentDidMount(){
    this.props.router.setRouteLeaveHook(
      this.props.route,
      this.routerWillLeave
    )

    routerWillLeave(nextLocation){
      return 'Are you sure you want to leave?';
    }

For 4.0.0, I simply tested with the example in https://react-router.now.sh/

I tested on iOS 10, with Chrome, Firefox, UC Browser, Opera Mini all working well.

The reason is most likely that Safari doesn't support beforeunloadand pagehide is used instead.
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

However, it's worst when I used it anyway on my 3.0.0 react SPA with browserHistory or hashHistory, as trying to navigate away by clicking links or back button not only doesn't trigger a leave prompt, the back button and any links on the page becomes malfunctioned as clicking on it has no effect at all, just like being trapped in those spam sites that forces you to stay.

I wonder what could be the solution? Would it be better to have something as follows implemented?

if ('onpagehide' in window) {
//if(window.onpagehide || window.onpagehide === null){
   window.addEventListener('pagehide', exitFunction, false);
} else {
   window.addEventListener('unload', exitFunction, false);
}

Source:
http://stackoverflow.com/questions/6906146/how-to-detect-browser-support-for-pageshow-and-pagehide

[timdorr]

This is something that would need to be supported on history most likely.

[mjackson]

@kdenz This is something that would need to be fixed in the history library. Let's follow up in https://github.com/mjackson/history/issues/406

[mjackson]

Ah, I just realized that this issue is talking about beforeunload. We don't actually currently support beforeunload in 4.x due to inconsistencies between the ways that browsers handle it. If you'd like support for it, I'd suggest you open a new issue in the history lib. As for now, it works as intended.