Astro Routing

6 Kernkonzepte

Die wichtigsten Astro-Routing-Konzepte für die Navigation: Statische Routen · Dynamische Routen · Parameter · Layouts · Pagination · API-Endpoints Astro verwendet ein datei-basiertes Routing-System. Jede `.astro`-, `.md`- oder `.mdx`-Datei im `pages/`-Verzeichnis wird automatisch zu einer Route. Dieses Cheatsheet erklärt die wichtigsten Routing-Konzepte.

Statische Routen – Datei-basiertes Routing

pages/index.astro → / · pages/about.astro → /about

src/pages/ ├── index.astro // → / ├── about.astro // → /about ├── blog/ ├── index.astro // → /blog └── [slug].astro // → /blog/hello-world └── 404.astro // → Fehlerseite

Statische Routen werden durch Dateien im pages/-Verzeichnis definiert. Der Dateiname entspricht der URL-Pfad. index.astro wird zur Root-Route.

Beispiele

---

// Frontmatter – serverseitiger Code

const title = "Startseite";

---

<html>

<head>

<title>{ title }</title>

</head>

<body>

<h1>Willkommen auf der Startseite!</h1>

</body>

</html>

---

export async function getStaticPaths() { /* ... */ }

const { data } = Astro.props;

---

<h1>Blogübersicht</h1>

{data.map(post => (

{post.title}

</a>

))}

Tipp: Die Datei 404.astro (oder 404.md) wird automatisch als benutzerdefinierte 404-Fehlerseite verwendet.

Dynamische Routen – [slug] und getStaticPaths

[slug].astro · [...slug].astro · getStaticPaths()

// src/pages/blog/[slug].astro export async function getStaticPaths() { return [{ params: { slug: 'hello' } }, { params: { slug: 'world' } }]; } const { slug } = Astro.params;

Dynamische Routen werden mit eckigen Klammern definiert (z.B. [slug].astro). getStaticPaths() generiert die möglichen Pfade zur Build-Zeit. [...slug].astro erfasst mehrere Pfadsegmente (Catch-all).

Beispiele

// src/pages/blog/[slug].astro

---

import { getCollection } from 'astro:content';

export async function getStaticPaths() {

const posts = await getCollection('blog');

return posts.map(post => ({

params: { slug: post.slug },

props: { post },

}));

}

const { post } = Astro.props;

---

<h1>{ post.data.title }</h1>

{ <Content /> }

</article>

// Catch-all Route src/pages/docs/[...slug].astro

// → /docs/getting-started → params: { slug: ['getting-started'] }

// → /docs/guides/advanced → params: { slug: ['guides', 'advanced'] }

Tipp: Bei der serverseitigen Ausführung (SSR) können Sie params auch ohne getStaticPaths verwenden – die Route wird dann zur Laufzeit dynamisch aufgelöst.

Parameter & Props – Daten an dynamische Seiten übergeben

params · props · Astro.params · Astro.props

// In getStaticPaths: return { params: { slug: 'hello' }, props: { id: 42 } }; // In der Seite: const { slug } = Astro.params; // Aus der URL const { id } = Astro.props; // Aus getStaticPaths

Parameter werden aus der URL extrahiert und in Astro.params bereitgestellt. Props können in getStaticPaths definiert und an die Seite übergeben werden.

Beispiele

// src/pages/products/[id].astro

---

// getStaticPaths mit Props

export async function getStaticPaths() {

const products = await fetchProducts();

return products.map(product => ({

params: { id: product.id.toString() },

props: { product },

}));

}

const { product } = Astro.props;

---

<h1>{ product.name }</h1>

<p>ID: { product.id }</p>

<p>Preis: { product.price }€</p>

// Mehrere Parameter in der URL: [category]/[slug].astro

// URL: /tech/astro-guide → params: { category: 'tech', slug: 'astro-guide' }

Tipp: Verwenden Sie props in getStaticPaths, um Daten direkt an die Seite zu übergeben – das ist effizienter als separate API-Aufrufe in der Seite.

Layouts & Verschachtelte Routen – Strukturierte Navigation

<slot /> · Layout.astro · Unterverzeichnisse

src/pages/ ├── blog/ ├── _layout.astro // Layout für Blog ├── index.astro └── [slug].astro ├── _layout.astro // Globales Layout └── index.astro

Layouts in Astro sind Komponenten, die das Grundgerüst von Seiten definieren. Sie werden durch _layout.astro-Dateien in Verzeichnissen definiert und können verschachtelt werden.

Beispiele

---

// Globale Layout-Elemente

---

<head>

<title>Meine Website</title>

</head>

<body>

<main>

</main>

</body>

</html>

---

// Blog-spezifische Elemente

---

<aside>Blog-Navigation</aside>

</article>

</div>

Tipp: _layout.astro-Dateien werden automatisch auf alle Seiten im gleichen Verzeichnis und dessen Unterverzeichnissen angewendet. Die Verschachtelung ermöglicht eine granulare Layout-Steuerung.

Pagination – Mehrere Seiten für große Datensätze

page · url · prev · next

// src/pages/blog/page/[page].astro export async function getStaticPaths({ paginate }) { const posts = await getCollection('blog'); return paginate(posts, { pageSize: 10 }); }

Pagination in Astro wird mit der integrierten paginate()-Funktion unterstützt. Sie generiert automatisch Seiten wie /blog/page/2 und stellt Daten für die aktuelle Seite bereit.

Beispiele

// src/pages/blog/page/[page].astro

---

import { getCollection } from 'astro:content';

export async function getStaticPaths({ paginate }) {

const posts = await getCollection('blog');

// Sortieren und Paginierung

const sortedPosts = posts.sort((a, b) => b.data.pubDate - a.data.pubDate);

return paginate(sortedPosts, { pageSize: 5 });

}

const { page } = Astro.props;

---

<h1>Blog – Seite { page.currentPage }</h1>

{page.data.map(post => (

<h2>{ post.data.title }</h2>

<a href={`/blog/${post.slug}`}>Lesen</a>

</article>

))}

{ page.url.prev && <a href={ page.url.prev }>Vorherige</a> }

{ page.url.next && <a href={ page.url.next }>Nächste</a> }

// Die erste Seite ist /blog (nicht /blog/page/1)

Tipp: Die paginate()-Funktion erstellt automatisch die erste Seite unter dem Basispfad (z.B. /blog) und die weiteren unter /blog/page/2, /blog/page/3 usw.

Fortgeschrittene Konzepte – API-Endpoints & Redirects

+server.js · redirects · middleware

// src/pages/api/posts/+server.js import { json } from '@sveltejs/kit'; export async function GET() { return json({ posts: [] }); }

API-Endpoints in Astro werden mit +server.js-Dateien im pages/-Verzeichnis definiert. Sie ermöglichen die Erstellung von REST-APIs. Redirects können in astro.config.mjs konfiguriert werden.

Beispiele

// src/pages/api/posts/+server.js

import { json } from 'astro';

export async function GET() {

const posts = await getAllPosts();

return json(posts);

}

export async function POST({ request }) {

const data = await request.json();

const newPost = await createPost(data);

return json(newPost, { status: 201 });

}

// astro.config.mjs – Redirects

export default defineConfig({

redirects: {

'/old-page': '/new-page',

'/blog/old-post': '/blog/neuer-beitrag',

'/docs/*': '/documentation/[...]',

});

// src/middleware.ts – Globale Middleware

import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(async ({ locals, request }, next) => {

// Authentifizierung oder Logging

console.log(`Request: ${request.url}`);

return await next();

});

Tipp: Astro-API-Endpoints werden nur im SSR-Modus (output: 'server' oder 'hybrid') unterstützt. Im statischen Modus können Sie stattdessen ein separates Backend oder Edge-Functions verwenden.

Astro Routing im Überblick

pages/ Datei-basiertes Routing
index.astro → /

[slug] Dynamische Parameter
/blog/hello-world

[...slug] Catch-all-Routen
/docs/guides/advanced

_layout Layouts & Slots
Verschachtelte Strukturen

paginate() Paginierung
/blog/page/2

+server.js API-Endpoints
GET, POST, PUT, DELETE

Quick Summary

index.astro

Statische Route

[slug]

Dynamische Route

Astro.params

Parameter

_layout

Layouts

paginate()

Pagination

+server.js

API-Endpoints

pages/blog/[slug].astro · export async function getStaticPaths() { ... } · const { slug } = Astro.params