Hook not firing on first page unload

[guimachiavelli]

Hello, @krasimir!

Thank you for this nice library, it's very handy to have a vanilla js router.

On my current project, I skip resolving the routes on page load since the server already serves the correct and fully formed page. However, when the user navigates away from the page, the leave hook does not fire (which is unfortunate since I rely on it to do some clean up before the page transition). Is this expected behaviour?

A few snippets of relevant code:

    const root = '${window.location.protocol}//${window.location.host}';
    this.navigo = new Navigo(root, false, '#!');

    const hooks = {
      before: page.willLoad,
      leave: page.willUnload,
      already: page.hasUnloaded,
    }

    const route = this.navigo.on(
      location,
      page.fetch,
      hooks,
    )

    if (window.location.href.indexOf(location.split('/')[0]) > -1) {
      this.navigo._lastRouteResolved = { url: '/', hooks };
      page.hasLoaded();
    }

As you see I do try a somewhat hack-y solution by setting _lastRouteResolved, but it hasn't worked. Any ideas on how to solve this?

Thanks again!

[krasimir]

Yep, I see what's the problem. When I started working on Navigo SSR wasn't a thing :) So, indeed because of the SSR the _lastRouteResolved is empty and there's no hooks to call. However, I have the feeling that even this was working you'll need something more. That's because that hook is synchronous. I'll suggest to implement the clean up outside of Navigo. For example:

const actualHandler = function () {
  console.log('actual handler');
}
const cleanUp = function (handler) {
  return () => {
    // cleaning up, fade out previous page etc
    handler();
  }
}

router.on('/some/url', cleanUp(actualHandler));

[guimachiavelli]

hi again,

Thanks for the quick reply!

In the end I did get my hack with the _lastResolvedRouteto work by setting it as the current route (I had previously misread Navigo's code on what it expected _lastRouteResolved.url to be). So, my solution was:

    const location = '/pageA';

    if (window.location.href.indexOf(location) > -1) {
      this.navigo._lastRouteResolved = { url: location, hooks };
      page.hasLoaded();
    }

In any case, not sure if I misunderstood your reply or if it isn't applicable to my specific case: a route does not have access to anything but itself and the router, so it cannot clean up after the previous route on navigate. As such, it doesn't matter whether leave is synchronous, since it only operates on content that belongs to the previous route.

A rough timeline of what I'm trying to achieve would be:

1. Site loads with pageA;
2. pageA sets up all its components and etc;
3. User clicks on link to pageB;
4. pageA cleans after itself;
   4.1 at the same time, content loading begins;
5. pageB finishes loading and sets itself up.

[krasimir]

There is a new version 8.0.0 which has a solution of the problem here. It is an option of the navigate method.

router.hooks({
  leave(match) {
    console.log("leaving ", match);
  },
});

router
  .on("/about", (match) => {
    render("About");
  })
  .on("/products", (match) => {
    render("Products");
  })
  .on("/login", (match) => {
    render("Login");
  })
  .on(() => {
    render("Home");
  });

router.navigate("/login", { silent: true });

The silent: true sets the internal state of the router. It basically updates a local variable called current. It's also the same one that lastResolved() method returns. That same object is passed to the leave hook took. So if you use silent you'll be able to set the router in a state without updating the URL of the browser and without resolving routes.

P.S.
Version 8.0.0 is not officially released but can be installed via npm install navigo@beta or yarn add navigo@beta. Migration guide is available here https://github.com/krasimir/navigo/blob/big-rewrite/CHANGELOG.md#migration-guide and the new documentation here https://github.com/krasimir/navigo/blob/big-rewrite/DOCUMENTATION.md.