sveltekit - Pass data from +layout.server.js to +layout.svelte and +page.svelte - Stack Overflow

admin管理员组

文章数量:1125475

I use layout.server.js to perform url checks and load other data. This data is loaded by +page.svelte. Now I want to load current url in +layout.svelte for page transition, but the data loaded (let { data } = $props();) in +layout.svelte is empty while it is correctly loaded in +page.svelte.

//(app)/+layout.server.js
export async function load({ url }) {
    //...some code
    return { myData, url: url.pathname };
}

//(app)/+page.svelte
let { data } = $props(); // returns the correct data

//src/+layout.svelte
<script>
let { children, data } = $props(); // undefined
</script>
{#key data.url}
    <main in:fade={{ duration: 300, delay: 300 }} out:fade={{ duration: 300 }}>
        {@render children?.()}
    </main>
{/key}

What am I missing ?

Thx,

I use layout.server.js to perform url checks and load other data. This data is loaded by +page.svelte. Now I want to load current url in +layout.svelte for page transition, but the data loaded (let { data } = $props();) in +layout.svelte is empty while it is correctly loaded in +page.svelte.

//(app)/+layout.server.js
export async function load({ url }) {
    //...some code
    return { myData, url: url.pathname };
}

//(app)/+page.svelte
let { data } = $props(); // returns the correct data

//src/+layout.svelte
<script>
let { children, data } = $props(); // undefined
</script>
{#key data.url}
    <main in:fade={{ duration: 300, delay: 300 }} out:fade={{ duration: 300 }}>
        {@render children?.()}
    </main>
{/key}

What am I missing ?

Thx,

• svelte
• sveltekit
• svelte-5

Share Improve this question Follow edited yesterday 16ar asked 2 days ago 16ar16ar 17522 silver badges1313 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Is the +layout.svelte safely in the same folder as the +layout.server.js and the +page.svelte? That would be the first thing that comes to mind, because I once had a case where I didn't see that because the file manager in the code editor had such extremely small indentations. If they are, have you tried building the application (npm run build) and running it in the production version (npm run preview)? Otherwise, I would also try deleting the .svelte-kit folder and deleting and reinstalling node_modules.

本文标签： sveltekitPass data from layoutserverjs to layoutsvelte and pagesvelteStack Overflow