in our project we are using React Router and history package to manage routes. We are also using xstate for our state managment. I would like to know if it is possible not only to detect route changes with history package but also to block re-routing to another page in case there are any unsaved parameters. This is my piece of code I am working with right now :

  React.useEffect(() => {
    history.listen((location, action) => {
      if(location.pathName === '/master')
      {
        history.block()
        send('ROUTE_CHANGE_INITIATED')
      }
    })
  }, [])

But this only blocks rerouting after the route has already change for example I leave the page that I shouldn't leave and then is rerouting blocked. What I am trying to do is to block the reroute before the route actually changes. Is this even possible from within component? I would not like to add this code to <Route /> components or even higher in the hierarchy.