Routing & Layouts

React gives you a blank canvas — you add a router yourself (react-router, TanStack Router, or the Next.js conventions). Astro takes a different approach: routing is built into the file system. Drop a .astro file into src/pages/ and it becomes a URL. No configuration, no <Route> components, no provider wrapping.

This module maps every routing and layout concept you already know from react-router or Next.js to the Astro equivalent.

Lesson	What you’ll learn
File-based routing	`src/pages/*.astro` → URL segments
Dynamic routes	`[slug].astro` + `getStaticPaths()` vs `generateStaticParams`
Layouts	`src/layouts/Layout.astro` + `<slot />` vs `layout.tsx`
Navigation	Plain `<a href>` MPA model + `Astro.url` vs `<Link>` / `useRouter`

Coming from a React SPA or Next.js you might expect a client-side router. Astro uses a Multi-Page Application (MPA) model by default: every navigation triggers a full page request and the server returns fully-rendered HTML. This is identical to how the web worked before SPAs — and it makes Astro extremely fast by 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

Module lessons

The MPA model