Router: Blocking route changes + Solution

[tomitrescak]

Hi, in your documentation you mention following:

No history blocking. I found that the only use-case I had was preventing the user from navigating away from a half-filled out form. Not only is it pretty easy to just save the form state to session storage and bring it back when they return, but history blocking doesn’t happen when you navigate away from the app (say to another domain). This kept me from actually using history blocking and always opting to save the form state to session storage.

Well, it is actually quite easy to achieve this with your awesome router with a higher order component:

import { Link } from '@reach/router';

export const BlockingLink =  props => 
  <Link {...props} 
      onClick={
          e => {     
            // you can implement this any way you want      
            if (whateverWillBlock) {
              e.preventDefault()
            }
            // trigger existing onclick
            props.onClick && props.onClick(e);
      } 
   />;

Of course this solution is prone to your code changes and can be broken in any future release.

[tomitrescak]

And unfortunately I just realised this will not work when clicking on "Back button" in history :/

[tomitrescak]

If anyone is interested, the other solution is VERY, VERY, VERY hacky but it works. you need to hack onto navigate (again, prone to API changes).

import { globalHistory } from '@reach/router';

const originalNavigate = globalHistory.navigate;
globalHistory.navigate = (...props) => {
    // your logic ...
    originalNavigate(...props);
}

[wardoost]

@tomitrescak Both solutions only work for Link components. It doesn't pick up the back button or when you use navigate.

[tomitrescak]

@wardoost, yup, I ditched Reach router after this finding. Back to react router. Reach router is amazing, but has limited use in more complex applications.

[IronSean]

I wish Reach/Router had both the history.block() and the navigate functionality instead of me having to choose between one or the other...

Edit: Actually the new useHistory hook on react-router really easily solves the navigate use case for functional components, and has made react-router an easy choice now.

[Sojborg]

I agree with @tomitrescak that it is unfortunate that react router does not support this. In our organisation we use this a lot that unfortunally i'm now on a project that is deeply dependent on reach router where i now can't implement this very common use case!

[mpourismaiel]

Is there any plan to add the ability to prevent page transitions?

[mahnunchik]

Any news?

[metacoding]

What about now?

[yohanliyanage]

I faced the same issue and stumbled upon this issue. With further investigation, I found this article (https://reacttraining.com/blog/reach-react-router-future/) where Ryan Florence says Reach Router will not receive any more new features. It is now in maintenance mode and he says the surviving project will be the new 'React Router'. So I would not count on this getting added in the future.