question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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® 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:closed
  • Created 2 years ago
  • Reactions:3
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
shah-mcccommented, May 20, 2021

I think this bug/feature is also the cause of this issue. https://github.com/sveltejs/kit/issues/1449

1reaction
shah-mcccommented, May 21, 2021

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react router slug compared to part of array - Stack Overflow
This results in the existing component unmounting and the new component mounting instead of just updating the existing component.
Read more >
Routing • Docs • SvelteKit
src/routes/blog/[slug] creates a route with a parameter, slug , that can be used to load data dynamically when a user requests a page...
Read more >
Slug Compiler | Heroku Dev Center
Slugs are compressed and pre-packaged copies of an application, optimized for distribution by the Heroku dyno manager. Minimize slug size ...
Read more >
Implementing SSR in Next.js: Dynamic routing and prefetching
This post will explore these and other concepts that make Next.js a ... Adding a global navigation bar to your Next.js App component...
Read more >
Route - Angular
Empty-path route configurations can be used to instantiate components that do not 'consume' any URL segments. In the following configuration, when navigating to ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found