Intercept the location change

[hakankaraduman]

Hi,

I could not see on the docs how to intercept the location change from a component.

Let's say I have a dirty state at the current page and want to use a custom modal component to alert the user if they want to move forward and lose data.

Thanks

[molefrog]

Hi @hakankaraduman
Thanks for an interesting request! This one seems to be a bit tricky, but I have a feeling that this is something you could achieve by writing our own useLocation hook.

Here is a backbone of the app:

import { Router } from "wouter";

// the standard hook used
import useLocation from "wouter/use-location";

const useInterruptibleLocation = () => {
  const [location, setLocation] = useLocation();
  
  const changeLocation = href => {
    // write your own logic here, call setLocation when location needs to be changed
  } 

  return [location, changeLocation];
} 

// you'll need this at the top-level to tell wouter to use your hook instead of the default one
<Router hook={useInterruptibleLocation} >

I'll try to get back with a real demo later.

[molefrog]

Hi again @hakankaraduman,
So I've managed to create a demo that addresses the behaviour you're trying to achieve. Hope it help!
https://codesandbox.io/s/wouter-interruptible-transition-2v7hs

I'm going to close the issue, hope you don't mind.