SvelteKit路由跳转时出现404错误，求解决方法

以下是针对SvelteKit路由404问题的具体排查和解决步骤：

• 检查路由文件命名与目录结构
  SvelteKit路由完全依赖src/routes目录结构，必须严格遵循规则：

  • 页面组件必须命名为+page.svelte（配套逻辑文件用+page.js/ts）
  • 动态路由需用[param]格式，比如src/routes/post/[id]/+page.svelte对应/post/xxx路径
  • 嵌套路由要匹配目录层级，比如访问/about/team需要src/routes/about/team/+page.svelte

• 验证路由跳转代码正确性
  使用goto函数跳转时，确保路径拼写和格式正确：

  <script>
    import { goto } from '$app/navigation';
    // 根路由跳转必须以/开头，避免相对路径导致的错误
    function navigateToAbout() {
      goto('/about');
    }
  </script>
  

  嵌套路由内使用相对路径时，要确认当前路由层级是否匹配。

• 排查布局或服务端文件的影响
  检查路由目录下的+layout.server.js/ts或+server.js/ts，确保没有错误的重定向、权限拦截逻辑返回404状态码。

• 确认适配器配置（生产环境）
  不同部署场景的适配器配置可能导致路由失效：

  • 静态站点适配器（@sveltejs/adapter-static）：需在src/routes/+layout.js添加export const prerender = true;，确保所有路由被预渲染
  • 服务器端适配器：检查适配器配置文件，确保路由规则没有被错误拦截

• 清除缓存并重启开发服务
  开发服务器缓存可能导致路由不更新，执行以下命令重置：

  npm run dev -- --clear
  

  或直接删除项目根目录下的.svelte-kit文件夹后重启服务。

• 检查路由排除配置
  打开svelte.config.js，确认kit.routes.exclude数组没有包含需要访问的路由：

  import adapter from '@sveltejs/adapter-auto';
  
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
    kit: {
      adapter: adapter(),
      routes: {
        exclude: [] // 确保目标路由不在此列表中
      }
    }
  };
  
  export default config;
  

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