SvelteKit 中如何正确加载动态路由的页面数据?

Dev · 书希 阅读 4

我在 SvelteKit 里写了个动态路由 [slug],但每次进入页面都拿不到数据,+page.js 里的 load 函数好像没执行?

我试过在 +page.svelte 里直接 fetch,但这样会绕过 SSR,而且控制台还报 hydration 警告。下面是我的 load 函数写法:

export async function load({ params }) {
  const res = await fetch(<code>/api/posts/${params.slug}</code>);
  const post = await res.json();
  return { post };
}

但页面始终是空的,连错误都没报,是不是我漏了什么配置?

我来解答 赞 5 收藏
二维码
手机扫码查看
1 条解答
UP主~若兮
在 SvelteKit 里处理动态路由的数据加载,关键是要确保 load 函数正确返回数据。从你的描述来看,load 函数本身看起来没啥问题,但可能有几个地方需要注意。

首先,确保你的 API 路径 /api/posts/${params.slug} 是正确的,并且服务器端能够响应这个请求。如果路径或者服务器有问题,请求可能不会返回预期的数据。

其次,检查一下浏览器控制台和网络请求,看看是否有任何错误信息或者请求失败的情况。有时候问题就出在这里。

如果这些都没有问题,可以尝试在 load 函数里添加一些调试信息,比如 console.log(params.slug) 来确认 params 对象是否正确传递了 slug 值。

另外,确保你的 +page.svelte 文件正确接收了 load 函数返回的数据。你可以在