Routing ด้วย SvelteKit
React ไม่มี router ในตัว แอป React ส่วนใหญ่จึงใช้ react-router (กำหนด route ด้วย component <Route> แบบ declarative) หรือใช้ framework อย่าง Next.js (routing แบบ file-based ใน pages/ หรือ app/) SvelteKit คือ full-stack framework ของ Svelte และ routing ถูกรวมอยู่ในตัวแล้ว — คุณไม่จำเป็นต้องติดตั้ง package router เพิ่มเติมเลย
การเปลี่ยนแนวคิดนั้นง่ายมาก: file system ของคุณคือ route map ไฟล์ทุกไฟล์ที่คุณสร้างใต้ src/routes/ จะกลายเป็น URL โดยอัตโนมัติ ไม่ต้องมี JSX route config ไม่ต้องมี createBrowserRouter ไม่ต้องมี wrapper <Routes>
รันคำสั่งนี้ในโปรเจกต์ SvelteKit (
npx sv create)
ไดเรกทอรี src/routes/
หัวข้อที่มีชื่อว่า “ไดเรกทอรี src/routes/”SvelteKit จอง src/routes/ ไว้สำหรับ route tree ของคุณ โครงสร้างของไดเรกทอรีนี้คือโครงสร้าง URL ของแอปพลิเคชัน
| ไฟล์ | URL |
|---|---|
src/routes/+page.svelte | / |
src/routes/about/+page.svelte | /about |
src/routes/blog/[slug]/+page.svelte | /blog/:slug |
src/routes/dashboard/+layout.svelte | ครอบทุกหน้าใต้ /dashboard/* |
ชื่อไฟล์พิเศษ — ดูรวดเดียวเข้าใจ
หัวข้อที่มีชื่อว่า “ชื่อไฟล์พิเศษ — ดูรวดเดียวเข้าใจ”SvelteKit ใช้ convention ของ ชื่อไฟล์ที่ขึ้นต้นด้วย + เพื่อให้ไฟล์ที่เป็นของ SvelteKit ไม่ปะปนกับ helper module ของคุณเองที่อยู่ในโฟลเดอร์เดียวกัน
| ชื่อไฟล์ | หน้าที่ |
|---|---|
+page.svelte | UI ของหน้าที่แสดงผลที่ route นี้ |
+page.js | ฟังก์ชัน load() — รันทั้งบน server และ client |
+page.server.js | ฟังก์ชัน load() — รันบน server เท่านั้น (DB, cookies, secrets) |
+layout.svelte | Shell ที่แชร์กัน ครอบทุก child route ในโฟลเดอร์นี้ |
+layout.js / +layout.server.js | load() สำหรับ layout |
+error.svelte | Error boundary สำหรับ route segment นี้ |
การแมปจาก React
หัวข้อที่มีชื่อว่า “การแมปจาก React”ถ้าคุณมาจาก react-router การเปลี่ยน mental model คือ:
- react-router: คุณเขียน config แบบ JS/JSX ที่แมป path string ไปยัง component import
- Next.js Pages Router: โฟลเดอร์
pages/— ไฟล์แมปไปยัง route - Next.js App Router: โฟลเดอร์
app/— ไฟล์page.tsxในโฟลเดอร์ต่าง ๆ แมปไปยัง route - SvelteKit: โฟลเดอร์
src/routes/— ไฟล์+page.svelteในโฟลเดอร์ต่าง ๆ แมปไปยัง route
SvelteKit ใกล้เคียงกับ Next.js App Router มากที่สุด แต่ใช้ +page.svelte แทน page.tsx และจัดการ data loading ใน +page.js / +page.server.js แทนที่จะทำให้ตัว component เป็น async
โมดูลนี้ครอบคลุมอะไรบ้าง
หัวข้อที่มีชื่อว่า “โมดูลนี้ครอบคลุมอะไรบ้าง”| บทเรียน | แนวคิด |
|---|---|
| หน้านี้ | Mental model: file-based routing และไดเรกทอรี src/routes/ |
| File-based routing | Nested routes, dynamic segment แบบ [param], walkthrough ของ file tree |
| Load functions | +page.js / +page.server.js สำหรับดึงข้อมูล — เทียบกับ react-router loaders และ getServerSideProps |