SvelteKit中基于文件夹结构的自定义404错误页面未按预期渲染

我之前也碰到过类似的问题，给你梳理几个可能的排查方向和解决办法：

1. 先检查你的SvelteKit版本 #

旧版本的SvelteKit在错误页面匹配逻辑上存在一些bug，尤其是涉及路由组（就是你那个带括号的(app)文件夹）的场景。建议直接升级到最新稳定版，执行下面的命令就行：

npm update sveltekit

很多这类路由匹配的问题，在新版本里都已经修复了。

2. 确认dashboard/+error.svelte的写法正确 #

错误页面不需要复杂的逻辑，只要是正常的Svelte组件就可以。你可以先把它简化成最基础的样子测试：

<script>
  export let error;
</script>

<h1>Dashboard 专属404：页面不存在</h1>
<p>错误状态码：{error.status}</p>

如果这个简化版还是不生效，那大概率不是组件代码的问题。

3. 排查是否有全局错误拦截逻辑 #

看看根目录的+error.svelte、hooks.server.js或者hooks.client.js里，有没有写强制跳转到根错误页面的代码。比如有些开发者会在根错误页面的load函数里做重定向，或者在hooks里统一处理错误并替换页面，这会覆盖子路由的错误页面匹配。

4. 清除开发缓存试试 #

有时候SvelteKit开发服务器的缓存会导致路由规则不更新，你可以：

• 先关掉开发服务器
• 删除项目根目录下的.svelte-kit文件夹和node_modules/.cache文件夹
• 重新安装依赖并启动服务器：

rm -rf .svelte-kit node_modules/.cache
npm install
npm run dev

5. 确认错误类型确实是404 #

有时候访问不存在的页面可能触发的不是404错误，比如如果dashboard下的+layout.svelte里的load函数抛出了其他类型的错误，可能会直接触发根错误页面。你可以在dashboard/+error.svelte里加个控制台日志，看看有没有被触发：

<script>
  export let error;
  console.log("Dashboard错误页面触发：", error);
</script>

访问/dashboard/blbla后打开浏览器控制台，如果看不到这条日志，说明错误页面根本没被匹配到，那还是回到版本或者路由配置的问题上。

一般来说，按照上面的步骤排查，基本能解决这个问题。我当时就是升级了SvelteKit版本，再清了缓存就正常了。

备注：内容来源于stack exchange，提问作者helth