Component variables aren't re-initiated when navigating to a different slug
See original GitHub issueDescribe 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® Core™ 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.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:3
- Comments:6 (4 by maintainers)

Top Related StackOverflow Question
I think this bug/feature is also the cause of this issue. https://github.com/sveltejs/kit/issues/1449
@jthegedus This issue differs from #1075 because initially the OP was not using the
loadfunction to get their props. Then OP is told (by none other than Rich himself) to use theloadfunction to get the updated props. The OP then uses theloadfunction 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.