Routing & Layouts

React ให้อิสระในการเลือก router เอง ไม่ว่าจะเป็น react-router, TanStack Router หรือ convention ของ Next.js แต่ Astro ใช้แนวทางที่ต่างออกไป: routing ถูกผูกอยู่กับ file system วางไฟล์ .astro ไว้ใน src/pages/ ก็กลายเป็น URL ทันที ไม่ต้องตั้งค่า ไม่ต้องใช้ <Route> และไม่ต้องครอบ provider

โมดูลนี้จะแมปทุก concept ด้าน routing และ layout ที่คุณรู้จักจาก react-router หรือ Next.js ให้ตรงกับสิ่งที่เทียบเท่าใน Astro

บทเรียน	สิ่งที่จะได้เรียนรู้
File-based routing	`src/pages/*.astro` → URL segment
Dynamic routes	`[slug].astro` + `getStaticPaths()` เทียบกับ `generateStaticParams`
Layouts	`src/layouts/Layout.astro` + `<slot />` เทียบกับ `layout.tsx`
Navigation	`<a href>` แบบ MPA + `Astro.url` เทียบกับ `<Link>` / `useRouter`

หากมาจาก React SPA หรือ Next.js อาจคาดว่าจะมี client-side router Astro ใช้โมเดล Multi-Page Application (MPA) เป็นค่าเริ่มต้น: ทุกการนำทางจะส่ง request ใหม่และ server ตอบกลับด้วย HTML ที่ render เสร็จแล้ว เหมือนกับที่เว็บทำงานก่อนยุค SPA — และทำให้ Astro เร็วมากในแบบ default

// React SPA — client-side navigation
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

<!-- Astro MPA — no router, no JS needed -->
<!-- src/pages/index.astro -->
---
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <h1>Home</h1>
</Layout>

<!-- src/pages/about.astro  →  /about -->

Routing & Layouts

บทเรียนในโมดูลนี้

โมเดล MPA