Svelte中+layout.server.js数据无法传递给+layout.svelte问题排查

你遇到的问题核心是布局文件与对应服务端load函数的路径不匹配：

• 你的(app)/+layout.server.js属于(app)路由组的服务端布局逻辑，它返回的数据只会传递给同目录下的(app)/+layout.svelte，无法被根目录的src/+layout.svelte获取到。
• 根目录的src/+layout.svelte对应的服务端load函数是同级的src/+layout.server.js，所以你在根布局中读取data会得到undefined。

解决方法（二选一） #

方法1：将load函数移至根目录 #

把(app)/+layout.server.js移动到src/根目录下，命名为src/+layout.server.js，这样根布局src/+layout.svelte就能正常获取到它返回的数据。

调整后的目录结构：

src/
├─ +layout.server.js
├─ +layout.svelte
└─ (app)/
   └─ +page.svelte

方法2：使用路由组对应的布局 #

在(app)目录下创建+layout.svelte，把页面过渡逻辑放在这个布局文件中，就能直接获取到同目录+layout.server.js返回的数据：

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

这样(app)路由组下的所有页面都会使用该布局，同时能正常读取服务端加载的数据。

内容的提问来源于stack exchange，提问作者16ar