-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add option to always reinstantiate a component on navigation #4941
Comments
Only after reading #4895 I found that we have the same issue in production. An option to change the behaviour would be great. |
Opened a discussion about this here: #5007 |
Moved this to the post-1.0 milestone, since after discussing people's use cases in #5007 it's clear than a boolean In my head, something like this in export function key({ url }) {
return url.pathname; // component always remounts if pathname changes, but not if query string does
} In the meantime, it's easy to do in userland... {#key $page.url.pathname}
<!-- the component contents -->
{/key} ...the only drawback being that it won't re-run code inside your |
Here's an quick way to implement the workaround:
<script lang="ts">
import { page } from '$app/stores';
import Page from './page.svelte';
export let data;
</script>
<!-- This is an workaround for: https://github.com/sveltejs/kit/issues/4941 -->
{#key $page.url.pathname}
<Page {data} />
{/key} Edit: Pass through |
@Rich-Harris Is there any update to this? I understand the logic behind this as a feature, but feels like a giant point of friction for what should be a number of common use cases (navigating between blog entries) |
i also hit this - i rely on the load function to fetch data from the api based on query params |
I hate to be one those "+1" people, but yeah this is such an unexpected area of SvelteKit that should really be made consistent. Everything works fine without reactive assignments, until I also added links to articles within my articles, and I would not see the new article even though the load function was called, the GET request to fetch the new article was made. Is it really that bad to run the script tag again? You do it when I navigate from /articles/one to /articles and then to /articles/two, why not do it when I go from /articles/one to /articles/two? |
I've ran into this issue, as well, and it's also a wanted update on my end. Instead of the more intricate workaround provided earlier in this thread, my team is going with adding the data-sveltekit-reload attribute to all of our anchor tags which would result in same page navigation. I realize this workaround might not be suitable for everyone, but if you're in a situation like our team, then the data-sveltekit-reload workaround is much easier to clean up after this issue is resolved.
To add onto this, it also seems like this issue has a similar effect with svelte:head components. Upon navigating from one page slug to the next, svelte:head components don't seem to be loaded in properly. |
Describe the problem
This is a follow up from #4895
When navigating to a new link, Sveltekit behaves differently if the link is handled by the same route or a different one; this can happen every time a route contains a slug.
For example:
Preconditions:
Case 1:
/two
to/one/something
, theone/[slug].svelte
component is instanciated and it's<script>
section is executed as expected/one/something
to/two
, theone/[slug].svelte
is deinstanciatedCase 2:
/one/other
to/one/something
, theone/[slug].svelte
component is not re-instanciated and the it's<script>
section is not executedthis leads to a page that behaves differently based on where the user was before navigating to it. A consequence of the fact that the
<script>
is not executed, is that all variables defined in it are not updated as expected.Describe the proposed solution
I would definitely prefer that by default Sveltekit behaves consistently on every route change no matter the previous route.
Anyway, having a global option in
svelte.config.js
to enable this behaviour would solve the issue.Alternatives considered
No response
Importance
would make my life easier
Additional Information
No response
The text was updated successfully, but these errors were encountered: