beforeNavigate fires when you click a link to the page you're on

[Blue-Nomad]

The docs say "A navigation interceptor that triggers before we navigate to a new URL" but that doesn't seem to be the case.

I'm using beforeNavigate to clear IntersectionObserver objects like:

beforeNavigate(() =>
{
  observer.disconnect()
})

And when I'm on the home page and I click a link to the home page, that fires and kills the observer so it doesn't work on the page.

I could do:

beforeNavigate(({ from, to }) =>
{
  if (from.url.pathname === to.url.pathname) return
  observer.disconnect()
))

But that feels like it shouldn't be necessary.

Is this a bug with beforeNavigate or am I doing this in a weird way?

[brunnerh]

Can't you use regular Svelte hooks like onMount/onDestroy?
(onDestroy runs on the server as well, so often the cleanup function returned by the callback in onMount is better.)

Also, how is the observer created? If it's onMount, that is also the perfect place to clean it up, if it's an action, those also have a destroy function as part of the return object for cleanup.

[Blue-Nomad]

Sure, I've created https://github.com/Blue-Nomad/SvelteKit-Issue-Demo-1/ that I think shows this well.

When navigating from the Home page to a Project page and vice versa, all 4 hooks run, but when navigating between the Project pages the Mount hooks don't run.

So I'm looking for hooks that run every time a page is navigated to when 1 component could be on every page. beforeNavigate & afterNavigate seemed perfect for that until I realised they also run when navigating to the page you're already on, which in my case runs the cleanup functions and kills the functionality of the page.

[brunnerh]

This is still missing the core piece: The IntersectionObeserver and how it is used.

I don't really understand the problem — if the route is the same, can't you keep the observer?
Isn't this what you want, initialize the observer and only clean it up if you navigate to a different route?

How does the other component factor into this, and if it's relevant to the observer, why doesn't the observer live there?

[Blue-Nomad]

Thanks for the reply. I didn't realise onMount was tied to routes like that.

Now when a component is only on 1 route, I'm using onMount and the return function to observe and unobserve elements, and that's working well.

When a component is on multiple pages within 1 route and onMount won't run when moving between them, I'm using:

onMount(() =>
{
    observer = new IntersectionObserver(...)
})

beforeNavigate(() =>
{
    observer.unobserve(element)
})

afterNavigate(() =>
{
    observer.observe(element)
})

[brunnerh]

Why not use an action on the element the observer is tied to?

[Blue-Nomad]

That makes sense, then it's tied to the element and can observe/unobserve based on its existence. Thanks for the help.