SvelteKit路由与命名规范问题：自定义文件无法渲染及跳转404

核心原因：SvelteKit的文件系统路由规则 #

SvelteKit采用文件系统驱动的路由，只有严格遵循命名约定的文件才会被识别为可访问的页面：

• 页面组件必须命名为+page.svelte，放置在src/routes目录下对应路径的文件夹中。比如要访问/game/mission，必须在src/routes/game/mission/下创建+page.svelte文件。
• 修改默认的+page.svelte文件名后，SvelteKit不会将其识别为页面入口，自然无法渲染。

跳转404的具体修复 #

1. 检查路径大小写：SvelteKit路由区分大小写，你调用goto('/game/Mission')但实际路径是game/mission（小写m），这会直接导致404。将跳转代码改为goto('/game/mission')，确保路径和文件系统中的文件夹/文件名完全匹配。
2. 确认文件结构：仔细核对src/routes/game/mission/+page.svelte是否存在，检查文件夹名、文件名的拼写（比如是不是误写成Mission文件夹）。

关于“添加其他文件配置”的说明 #

SvelteKit没有单独的配置文件来支持自定义页面文件名，路由规则是固定的。如果想保留自定义命名的Svelte组件，可以将其作为子组件导入到+page.svelte中：

<!-- src/routes/game/mission/+page.svelte -->
<script>
  import Mission from './Mission.svelte';
</script>

<Mission />

这样既可以复用你的自定义组件，又能满足SvelteKit的路由要求。

额外排查步骤 #

• 重启开发服务器：修改文件结构后，有时开发服务器不会自动刷新，执行npm run dev重启后再测试。
• 查看终端日志：启动开发服务器时，SvelteKit会输出已注册的路由列表，确认/game/mission是否在其中，没有的话说明文件结构不符合规则。

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