Svelte中动态路径返回404错误的问题排查

问题描述 #

在routes/目录下创建blog文件夹，内有[blog].svelte和+page.svelte两个文件，预期路由规则：

• GET /blog 对应+page.svelte
• GET /blog/hello 对应[blog].svelte
  但实际访问/blog/hello时返回404错误。

问题原因及解决方法 #

这是因为混淆了SvelteKit的路由规范，尤其是新版（1.0+）的路由规则：

• 旧版SvelteKit允许直接使用[param].svelte作为动态路由文件，但新版已完全采用+page.svelte的命名体系。
• 新版中，动态路由必须通过文件夹形式定义参数，再在文件夹内放置+page.svelte。

正确的文件结构应该是：

routes/
└── blog/
    ├── +page.svelte           # 匹配 /blog
    └── [postSlug]/            # 参数名可自定义，比如原命名的blog
        └── +page.svelte       # 匹配 /blog/hello

调整结构后，访问/blog/hello即可正常匹配动态路由对应的页面。

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