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.

Svelte is reusing component with its state on different pages using the same route

See original GitHub issue

Describe the bug

Svelte routing reuses the component with its local state. I have a route (/counter/[id]) That is using the sveltekit demo counter component. Navigating from one counter/[id] page to another keep the state of the counter component The only way to make it work as I want is to use the target="_self" attribute on the link which is forcing a full page reload (not ideal)

Sorry if this is expected behavior, it looks like a bug to me.

Reproduction

Demo: https://routing-issue-theta.vercel.app/ Repo: https://github.com/plrenaudin/svelte-routing-issue

Logs

No response

System Info

System:
    OS: Linux 5.14 Solus 4.3
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 1.73 GB / 15.46 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 7.24.2 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Brave Browser: unknown
    Firefox: 96.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.14 
    @sveltejs/kit: next => 1.0.0-next.239 
    svelte: ^3.44.0 => 3.46.2

Severity

serious, but I can work around it

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

johnnysprinklescommented, Mar 18, 2022

Is there any chance we can reconsider this issue? Resetting the state in afterNavigate is more error prone than simply tearing the whole component down and remounting it. It just strikes me as a little weird that what happens when you "arrive at “/id/4” is different depending on if you came from “/foo” or “/id/3”. I do get the point about performance and animating between, so any change would need to be opt in of course.

0reactions

Rich-Harriscommented, May 21, 2022

Opened a discussion about this here: https://github.com/sveltejs/kit/discussions/5007

Top Results From Across the Web

Resetting components on navigation #5007 - GitHub

Svelte is reusing component with its state on different pages using the same route #3506 · <script> is not executed when browsing from...

Componentizing our Svelte app - Learn web development

In Svelte, an application is composed from one or more components. A component is a reusable, self-contained block of code that encapsulates ...

Svelte - communicate between pages and components ...

The idea is that the pages don't import this component, so they don't really communicate with each other. Do you have any idea...

Working With Components – Vercel Docs

svelte is a Svelte component. If this file lives in the /src/routes directory, it will be a page, meaning it has a coresponding...

Advanced routing • Docs • SvelteKit

Like pages, layouts can themselves break out of their parent layout hierarchy, using the same technique. For example, a +layout@.svelte component would reset ......