File-based Routing

ใน SvelteKit โครงสร้างโฟลเดอร์ใต้ src/routes/ คือ URL ของแอปพลิเคชันโดยตรง ไม่มีขั้นตอนการกำหนด route เพิ่มเติม — แค่สร้างไฟล์และโฟลเดอร์ที่ถูกต้อง แล้ว SvelteKit จะจัดการ routing ให้เอง บทเรียนนี้จะพาคุณไปดู route patterns หลัก ๆ ทั้งหมด พร้อมเปรียบเทียบกับ react-router และ Next.js

File tree และ URL ที่สอดคล้องกัน

flowchart TB
  routes(["src/routes/"])
  routes --> rootPage["+page.svelte → /"]
  routes --> about["about/"]
  about --> aboutPage["+page.svelte → /about"]
  routes --> blog["blog/"]
  blog --> blogPage["+page.svelte → /blog"]
  blog --> slug["[slug]/"]
  slug --> slugPage["+page.svelte → /blog/:slug"]
  routes --> dashboard["dashboard/"]
  dashboard --> dashLayout["+layout.svelte (shared layout)"]
  dashboard --> dashPage["+page.svelte → /dashboard"]
  dashboard --> settings["settings/"]
  settings --> settingsPage["+page.svelte → /dashboard/settings"]

SvelteKit src/routes/ file tree

ทุกโฟลเดอร์คือ URL segment ทุกไฟล์ +page.svelte คือหน้าที่จะแสดงผลที่ URL นั้น ส่วน +layout.svelte ครอบทุก sibling และ child route ในโฟลเดอร์เดียวกัน

Static routes

เปรียบเทียบวิธีกำหนด static route /about ใน react-router, Next.js และ SvelteKit:

// react-router v6
import { createBrowserRouter } from 'react-router-dom';
import About from './pages/About';

const router = createBrowserRouter([
  { path: '/about', element: <About /> },
]);

<!-- src/routes/about/+page.svelte -->
<h1>About</h1>
<p>ไม่มี config — แค่วางไฟล์นี้ไว้ในโฟลเดอร์ about/</p>

ด้านซ้ายต้องมี import, config object และ router instance ด้านขวาแค่สร้างไฟล์ในโฟลเดอร์ที่ถูกต้อง

Dynamic routes — `[param]`

ชื่อโฟลเดอร์ที่ห้อมล้อมด้วยวงเล็บเหลี่ยมกลายเป็น dynamic segment คุณอ่านค่า param ใน +page.svelte ผ่าน page.params:

// react-router v6
{ path: '/blog/:slug', element: <BlogPost /> }

// BlogPost.jsx
import { useParams } from 'react-router-dom';
function BlogPost() {
  const { slug } = useParams();
  return <h1>Post: {slug}</h1>;
}

<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  import { page } from '$app/state';
</script>

<h1>Post: {page.params.slug}</h1>

ชื่อโฟลเดอร์ [slug] คือชื่อ key ของ params โดยตรง — เหมือนกับ :slug ใน react-router หรือ [slug] ใน Next.js

Nested layouts

+layout.svelte ใน level ใด ๆ จะครอบทุก route ในโฟลเดอร์นั้นและโฟลเดอร์ลูก ซึ่งสอดคล้องกับ layout.tsx ของ Next.js App Router หรือ <Outlet> ของ react-router:

// react-router v6 — nested layout
{ path: '/dashboard',
  element: <DashboardLayout />,
  children: [
    { index: true, element: <DashboardHome /> },
    { path: 'settings', element: <Settings /> },
  ]
}

// DashboardLayout.jsx
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
  return (
    <div>
      <nav>Dashboard nav</nav>
      <Outlet />
    </div>
  );
}

<!-- src/routes/dashboard/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<nav>Dashboard nav</nav>
{@render children()}

<!-- src/routes/dashboard/+page.svelte -->
<h1>Dashboard Home</h1>

<!-- src/routes/dashboard/settings/+page.svelte -->
<h1>Settings</h1>

{@render children()} ใน +layout.svelte คือจุดที่ child page จะถูก render เข้าไป — ทำหน้าที่เหมือน <Outlet /> ของ react-router พอดี

🔀 react-router / Next.js vs SvelteKit — file-based routing

Static route: react-router ต้องการ config object — SvelteKit แค่ต้องการโฟลเดอร์และ +page.svelte
Dynamic segment: react-router :slug, Next.js [slug].tsx หรือ [slug]/page.tsx — SvelteKit [slug]/+page.svelte (convention เหมือน Next.js แต่ขยายด้วย +page.svelte)
Layout: react-router ใช้ <Outlet />, Next.js App Router ใช้ layout.tsx — SvelteKit ใช้ +layout.svelte ที่มี {@render children()}
การอ่าน route param: react-router useParams(), Next.js params prop — SvelteKit page.params จาก $app/state
ทุก level ของโฟลเดอร์สามารถมี +layout.svelte ของตัวเอง — layouts ซ้อนกันได้ไม่จำกัด

File-based Routing

File tree และ URL ที่สอดคล้องกัน

Static routes

Dynamic routes — [param]

Nested layouts

Dynamic routes — `[param]`