Router: Route has changed event

[muuvmuuv]

Have a question?

I work on a Gatsby website ATM and have a Navigation component where I want to call a function (resetMobileNav) when the route has changed.

Is this possible? I expect something like router.on('navigationEnd').then((newRoute, oldRoute) => {...))

[muuvmuuv]

Okay, I have found a way:

  public componentDidMount() {
    globalHistory.listen(({ action }) => {
      if (action === 'PUSH') {
        this.resetNav()
      }
    })
  }

but I'll wait if someone else has a better more modern solution until I close

[armellarcier]

Thanks man, saved my life. This should be documented. A Google search on '"reach-router" route change event' leads just here though.

[rebolyte]

Huge thanks as well. Searched for a long time. This should definitely be documented!

Note that you should call the unsubscriber returned from .listen():

componentDidMount() {
  this.historyUnsubscribe = globalHistory.listen(...);
}
componentWillUnmount() {
  this.historyUnsubscribe();
}

or with hooks:

```js
useEffect(() => {
return globalHistory.listen(...);
}, []);

[mrassili]

import { globalHistory } from '@reach/router' for those wondering where this globalHistory is coming from (took me 5 minutes to figure it out)

[Invoker96]

Is there any way to detect route change before it actually changes?

Here globalHistory.listen() actually triggers after the route has changed

[JoshMatthew]

Is there any way to detect route change before it actually changes?

Here globalHistory.listen() actually triggers after the route has changed

Hello so I've done something to work around this problem. As of now, there's no available event when a user is ABOUT to change routes. So what I did is, I made a custom event and made a wrapper function for navigate. The purpose of the wrapper function is to call my custom event before the actual call for navigate. It looks like this

let beforePathChange = new Event("onpathchange", {cancelable: true});

export async function navigateTo(path: string, options?: NavigateOptions<{}>) {
  let canceled = dispatchEvent(beforePathChange);
  if(!canceled) {
    await navigate(path, options);
  }
}

I exported it so that I can use it to any other classes. In the recieving end, it looks like this

componentDidMount() {
        window.history.pushState(null, document.title, window.location.href);

        window.addEventListener("onpathchange", this.onPathChangeHandler);
}

componentWillUnmount() {
        window.removeEventListener("onpathchange", this.onPathChangeHandler);
}

And finally in onPathChangeHandler method

onPathChangeHandler(e: any) {
    if(window.confirm(alertMessage)) {
         e.preventDefault();
    } else {
     window.history.pushState(null, document.title, window.location.href);  
    }
}