SvelteKit无法识别[id].svelte文件，路由访问404问题求助

访问 /dashboard/tickets/test 路径时持续返回404错误，但 /dashboard/tickets 可正常访问，[id].svelte 对应的动态路由也存在相同的路由无法识别问题。

项目文件夹结构 #

src
├── components
│   ├── TicketInList.svelte
│   └── TicketList.svelte
├── routes
│   └── dashboard
│       ├── tickets
│       │   ├── [id].svelte
│       │   ├── test.svelte
│       │   └── +page.svelte
│       ├── +page.svelte
│       └── +layout.svelte

test.svelte 代码内容 #

<script context="module">
    import { goto } from '$app/navigation';
    
    function goBack() {
        goto('/dashboard/tickets');
    }
</script>

<h1>Test Route</h1>
<button on:click={goBack}>Go back to tickets list</button>

• 修正路由文件命名与结构
  SvelteKit 要求路由页面文件必须以 +page.svelte 命名，且子路由需要对应独立目录。你需要调整文件结构：

  • 将 test.svelte 移动到 test 目录下并重命名为 +page.svelte
  • 将 [id].svelte 移动到 [id] 目录下并重命名为 +page.svelte
    调整后的路由结构应为：

  src/routes/dashboard/tickets
  ├── [id]
  │   └── +page.svelte
  ├── test
  │   └── +page.svelte
  └── +page.svelte
  

• 动态路由参数处理
  对于 [id]/+page.svelte，若需获取路由参数，需通过 $app/stores 导入 page 对象：

  <script>
      import { page } from '$app/stores';
      const ticketId = $page.params.id;
  </script>
  
  <h1>Ticket Detail: {ticketId}</h1>
  

• 重启开发服务器
  修改路由结构后，必须重启SvelteKit开发服务器，确保新路由配置被加载生效。

• 排查布局与权限拦截
  检查 dashboard/+layout.svelte 中是否存在限制子路由访问的逻辑（如未授权重定向），这类逻辑可能导致路由被拦截而返回404。

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