Routing & Pages

folder คือ route

ใน SvelteKit โครงสร้าง folder ใต้ src/routes/ คือ โครงสร้าง URL ไฟล์ +page.svelte ทำให้ folder ของตัวเองกลายเป็นเพจที่เข้าถึงได้

src/routes/
├── +page.svelte              →  /
├── about/
│   └── +page.svelte          →  /about
├── blog/
│   ├── +page.svelte          →  /blog
│   └── [slug]/
│       └── +page.svelte      →  /blog/:slug   (dynamic)
└── +layout.svelte            →  wraps every page

flowchart LR
  f1["routes/+page.svelte"] --> u1["/"]
  f2["routes/about/+page.svelte"] --> u2["/about"]
  f3["routes/blog/[slug]/+page.svelte"] --> u3["/blog/:slug"]

folder แมปเป็น URL

dynamic parameter

วงเล็บเหลี่ยมในชื่อ folder จะจับ segment ของ URL ไว้ src/routes/blog/[slug]/+page.svelte จะ match /blog/hello และค่านั้นจะอยู่ที่ params.slug (ใน load function — บทเรียนถัดไป) รูปแบบต่าง ๆ:

[slug] — parameter ที่บังคับต้องมี
[...rest] — rest parameter ที่ match ได้หลาย segment (/docs/a/b/c)
[[optional]] — optional parameter ที่ match ได้แม้ไม่มีค่า

layout ครอบ page

+layout.svelte มีผลกับ folder ของตัวเองและทุก route ที่อยู่ข้างใต้ — เป็นที่วางองค์ประกอบที่ใช้ร่วมกันอย่าง header และ footer โดย layout render child route ผ่าน children snippet:

<script>
  let { children } = $props();   // the active child page
</script>

<nav>…site navigation…</nav>

<main>
  {@render children()}           <!-- the current page renders here -->
</main>

<footer>© 2026</footer>

layout ซ้อนกันได้ (nest): layout ที่อยู่ลึกกว่าในต้นไม้จะถูกครอบด้วยตัวที่อยู่เหนือขึ้นไป คุณจึงประกอบ global shell กับ shell เฉพาะแต่ละส่วนได้

+error.svelte ใน folder หนึ่งจะ render เมื่อ load ใน subtree นั้น throw — เป็น error boundary แบบ scoped ที่อ่าน error ผ่าน page.error (จาก $app/state)
navigation ใช้ลิงก์ <a href="/blog"> ปกติ SvelteKit จะ intercept ไว้เพื่อทำ client-side navigation ที่เร็ว (ไม่ reload ทั้งหน้า) ส่วนการ navigate แบบ programmatic ให้เรียก goto('/blog') จาก $app/navigation

<script>
  import { goto } from '$app/navigation';
</script>

<a href="/about">About</a>                     <!-- client-side nav -->
<button onclick={() => goto('/dashboard')}>Go</button>

Routing & Pages

folder คือ route

dynamic parameter

layout ครอบ page

error page และ navigation