Routing w Astro

Astro używa file-based routing — każdy plik w katalogu src/pages/ automatycznie staje się stroną dostępną pod odpowiadającym mu adresem URL.

Podstawowe mapowanie

src/pages/index.astro        →  /
src/pages/about.astro        →  /about
src/pages/blog/index.astro   →  /blog
src/pages/blog/post.md       →  /blog/post

Żadnej konfiguracji routera, żadnych tablicy tras. Wystarczy utworzyć plik.

Dynamiczne trasy

Dla stron generowanych dynamicznie (np. posty bloga) używasz nawiasów kwadratowych w nazwie pliku:

src/pages/blog/[slug].astro  →  /blog/:slug
src/pages/[lang]/index.astro →  /:lang

W komponencie musisz zdefiniować funkcję getStaticPaths():

---
export async function getStaticPaths() {
  const posts = await fetchPosts(); // np. z CMS lub plików .md
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
---

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

Przekierowania i 404

src/pages/404.astro  →  własna strona błędu 404

Przekierowania konfiguruje się w astro.config.mjs:

export default defineConfig({
  redirects: {
    '/stara-sciezka': '/nowa-sciezka',
  },
});

Dostęp do parametrów i URL

W każdym komponencie strony masz dostęp do obiektu Astro:

---
// Parametry dynamicznej trasy
const { slug } = Astro.params;

// Obiekt URL (pathname, searchParams, itp.)
const url = Astro.url;

// Request (tylko w trybie SSR)
const request = Astro.request;
---

---

← Wróć do bloga