SvelteKit路由异常：/src/routes/about/+page.svelte未映射到/about

你遇到的核心问题是混淆了SvelteKit的路由布局机制：Supabase示例中的App.svelte是作为单页面入口编写的，直接渲染固定内容，没有为路由页面留出显示位置。而SvelteKit的路由系统依赖src/routes下的+layout.svelte（全局布局）和+page.svelte（页面），通过<slot />来承载子页面内容。

根据你的需求选择以下两种方案之一：

方案1：让所有页面共享Supabase的Auth/Account布局 #

适合希望About页面也显示登录状态的场景：

1. 移除src/App.svelte
2. 创建src/routes/+layout.svelte，将原App.svelte的代码迁移过去，并添加<slot />（关键，用于渲染路由页面内容）：

<script lang="ts">
  import { onMount } from 'svelte'
  import { supabase } from '../supabaseClient'
  import type { AuthSession } from '@supabase/supabase-js'
  import Account from '../lib/Account.svelte'
  import Auth from '../lib/Auth.svelte'

  let session: AuthSession | null

  onMount(() => {
    supabase.auth.getSession().then(({ data }) => {
      session = data.session
    })

    supabase.auth.onAuthStateChange((_event, _session) => {
      session = _session
    })
  })
</script>

<div class="container" style="padding: 50px 0 100px 0">
  {#if !session}
    <Auth />
  {:else}
    <Account {session} />
  {/if}
  <!-- 路由页面内容会渲染在这里 -->
  <slot />
</div>

3. 创建src/routes/+page.svelte作为首页（如果不存在）：

<h1>Home Page</h1>
<a href="/about">前往About页面</a>

4. 重启开发服务器，访问/about即可看到About页面内容，同时顶部会显示Auth/Account组件。

方案2：仅首页显示Auth/Account，About页面独立 #

适合希望About页面不包含登录相关内容的场景：

1. 移除src/App.svelte
2. 创建src/routes/+layout.svelte，仅保留基础布局和slot：

<div>
  <slot />
</div>

3. 将原App.svelte的代码迁移到src/routes/+page.svelte（首页）：

<script lang="ts">
  import { onMount } from 'svelte'
  import { supabase } from '../supabaseClient'
  import type { AuthSession } from '@supabase/supabase-js'
  import Account from '../lib/Account.svelte'
  import Auth from '../lib/Auth.svelte'

  let session: AuthSession | null

  onMount(() => {
    supabase.auth.getSession().then(({ data }) => {
      session = data.session
    })

    supabase.auth.onAuthStateChange((_event, _session) => {
      session = _session
    })
  })
</script>

<div class="container" style="padding: 50px 0 100px 0">
  {#if !session}
    <Auth />
  {:else}
    <Account {session} />
  {/if}
  <a href="/about">前往About页面</a>
</div>

4. 重启开发服务器，访问/显示登录相关内容，访问/about仅显示About页面的内容。

• 确保src/app.html中的内容是SvelteKit默认的，包含%sveltekit.body%（路由内容会渲染到这里）
• 确认src/routes/about/+page.svelte的路径和文件名正确（SvelteKit严格识别+page.svelte作为页面文件）

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