SvelteKit带[id]参数的CRUD路由404问题求助

问题现象 #

• 访问http://localhost:5173/get可正常获取所有画作列表
• 访问http://localhost:5173/get/66465b054183ec71756ed694返回404错误，但直接调用APIhttp://localhost:5173/api/get/66465b054183ec71756ed694能返回正确的单条画作数据

核心原因 #

SvelteKit的动态路由页面组件命名不符合规范：当前文件get/[id].svelte无法被框架识别为动态路由页面，必须遵循+page.svelte的命名规则，并放在对应的动态参数目录下。

解决方案 #

1. 修正动态路由文件结构 #

将src/routes/get/[id].svelte移动到src/routes/get/[id]/+page.svelte，最终路由结构应为：

src/routes/get/
├── +page.svelte
└── [id]/
    └── +page.svelte

2. 修正参数获取逻辑 #

在[id]/+page.svelte中，正确通过$page.params.id获取动态参数，替换原错误的$page.params['*']：

<script>
    import { onMount } from 'svelte';
    import { getPaintingById } from '$lib/api';
    import { page } from '$app/stores';

    let painting = null;
    let error = null;

    onMount(async () => {
        try {
            const id = $page.params.id;
            console.log('当前请求的画作ID:', id); // 用于验证参数是否正确获取
            painting = await getPaintingById(id);
        } catch (err) {
            console.error('获取画作失败:', err);
            error = err.message;
        }
    });
</script>

{#if error}
    <p>{error}</p>
{:else if !painting}
    <p>加载中...</p>
{:else}
    <h1>{painting.name}</h1>
    <p>{painting.description}</p>
{/if}

3. 验证并重启服务 #

• 确认api.js中的getPaintingById函数URL拼接逻辑正确（当前代码无需修改）：

  export async function getPaintingById(id) {
      const response = await fetch(`/api/get/${id}`);
  
      if (!response.ok) {
          throw new Error('Failed to fetch painting');
      }
      return await response.json();
  }
  

• 重启SvelteKit开发服务器，让框架重新识别路由配置

额外排查点 #

• 若仍存在问题，检查Spring后端/api/get/{id}接口是否正确处理GET请求
• 确认没有其他路由规则与/get/:id冲突

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