How to manage the page stack like a native app instead of destroying it.

[grj1997]

Describe the bug

Reproduction

component 发生变化会重新渲染，我希望某个路由回退的时候不重新渲染，如何处理这种问题

Logs

System Info

.

Severity

annoyance

[paoloricciuti]

Please write your issues in english and provide a proper reproduction, not a screenshot 😊

[grj1997]

<svelte:component
this={component}
on:routeEvent
{...props}
/>
I use svelte:component to dynamically change the advance and retreat of the component route, but when the value of the component changes when the route is rolled back, it will be rendered again. Is there any solution? I hope that when the route is controlled, it will be rolled back like an app without reloading the page that has been displayed

20250313_095548.mp4

[brunnerh]

If you are using {#if}, that will create and destroy components based on a condition.
To keep the instance around, you would have to just hide it or overlay other components on top.
To hide the component you can e.g. conditionally set a wrapper element's display to none.

Overlaying components example

[grj1997]

I did use 'style' to control display and hide, but this has a new problem, if I have a lot of routes will cause a lot of loading rendering because of the use of 'for', which greatly consumes the first screen loading time, there is no better solution

[brunnerh]

The #each should not render all routes, but only the ones in the user navigation history.
Even then it could be limited further to just a few recent routes if the history grows too large.

[kariyum]

How about querying the data in your root +layout.ts? The data is still accessed in your +page.svelte and it isn't queried again when you got back and forth pages. Although, you need to invalidate the data manually.

[grj1997]

I'm now using each + if to deal with once accessed forever