Component variables aren't re-initiated when navigating to a different slug

[ric2b]

Describe the bug

When navigating between slugs via links or by triggering goto(), component variables aren't re-initialized, leading to bugs.

Navigating directly to the pages via the browser's address bar does have the expected result.

To Reproduce
Here's a simple component that shows the issue:

<!-- src/routes/test/[slug].svelte -->
<script context="module">
  export async function load({ page, fetch, session, context }) {
    return { props: { currentSlug: page.params.slug } };
  }
</script>

<script>
  import { goto } from '$app/navigation';
  export let currentSlug;

  let currentValue = currentSlug;
</script>

<button on:click={() => goto('/test/A')}>A</button>
<button on:click={() => goto('/test/B')}>B</button>

<a href="/test/A">A</a>
<a href="/test/B">B</a>

<h1>{currentSlug}</h1>
<h1>{currentValue}</h1>

currentSlug and currentValue should always match, but instead currentValue seems to be calculated only once and retains the value between navigations. If you click the buttons or links, you'll see currentSlug changing but not currentValue.

Expected behavior

Since these are supposed to be dynamic routes I expect the component to be-reinitialized after a navigation (or at least behave as if it was, even if some optimizations are in place that avoid re-initializing most of the component).

Information about your SvelteKit Installation:

Diagnostics

System:
OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
CPU: (4) x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
Memory: 978.23 MB / 31.32 GB
Container: Yes
Shell: 3.1.2 - /usr/bin/fish
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
npm: 7.12.0 - ~/.nvm/versions/node/v14.16.0/bin/npm
Browsers:
Chromium: 90.0.4430.212
Firefox: 88.0.1
npmPackages:
@sveltejs/kit: next => 1.0.0-next.107
svelte: ^3.38.2 => 3.38.2
vite: ^2.3.2 => 2.3.2

• Firefox

• adapter-static 1.0.0-next.9

Severity
This does have a workaround by declaring currentValue as a reactive statement:

$: currentValue = currentSlug;

However I think it's very unintuitive behavior and I can't find any documentation that states this is expected or intentional behavior. It took me a while to figure out what was going on, as I was running into this in a more complicated component.

[ric2b]

This seems sort of related but I don't think it's quite the same issue since it doesn't involve the load function: #1075

[shah-mcc]

I think this bug/feature is also the cause of this issue. #1449

[jthegedus]

@ric2b How is this different to #1075 ? Seems exactly the same to me 🤔

[ric2b]

You're right, it might be the same thing.

But at the very least I feel like the documentation is lacking, if several people have run into this behavior thinking it's a bug.

When I read the dynamic routes docs I don't expect the component to stick around with the previous values when the user navigates to a different slug, that makes dynamic routes more cumbersome to write.

Anything that is slug-specific needs to become reactive even if it is a constant in the scope of each different slug.

[shah-mcc]

@jthegedus This issue differs from #1075 because initially the OP was not using the load function to get their props. Then OP is told (by none other than Rich himself) to use the load function to get the updated props. The OP then uses the load function to get the updated props and reports that it works. In fact, this issue picks up where that one ends. What the OP (and everyone else, I assume) believes to be correct is exactly what's not working here.

[benmccann]

I'm going to close this as a duplicate of #552 which requests some possible additional functionality. There's some explanation there as to why it currently works the way it does