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 GitHub Comments
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
load
function to get their props. Then OP is told (by none other than Rich himself) to use theload
function to get the updated props. The OP then uses theload
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.