SvelteKit issue with header not refreshing

Question

Given this +layout.svelte:

<div class="app">
    <Header />
    
    <main>
        {@render children()}
    </main>
</div>

if I do a goto in a component, the Header does not refresh (as i think svelte thinks only the children can change). how can I make the Header refresh as well?

note that in the Header i have some code that uses page so i was thinking full reactivity should kick (if Header depends on page.url it should refresh if page.url changes but that is not happening)

Header.svelte:

const init = async () => {
    if (page.url.pathname === '/error') {
        // do something
    }       
}

onMount(init)

brunnerh · Accepted Answer · 2025-03-02 06:06:09Z

0

onMount only runs... on mount.

Unless you switch to a route with a different layout, this only happens once since the component stays mounted. If you want this to run on change, you need an $effect instead. (effects also initially run when the components mount and can thus often replace an onMount call.)

edited Mar 2 at 6:06

answered Mar 2 at 2:41

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SvelteKit issue with header not refreshing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related