Páginas, routing y rutas dinámicas

Astro usa file-based routing. Eso significa que gran parte del routing se define simplemente creando archivos y carpetas en src/pages.

Rutas básicas

src/pages/index.astro        -> /
src/pages/about.astro        -> /about
src/pages/blog/index.astro   -> /blog

No necesitas configurar un router aparte para esto.

Rutas anidadas

Si quieres una sección de blog:

src/pages/blog/index.astro
src/pages/blog/astro.astro
src/pages/blog/css.astro

Eso genera:

• /blog
• /blog/astro
• /blog/css

Rutas dinámicas

Cuando no sabes el slug por adelantado a mano, usas archivos con corchetes:

src/pages/blog/[slug].astro

Ejemplo:

---
export async function getStaticPaths() {
  return [
    { params: { slug: 'hola-astro' } },
    { params: { slug: 'mi-segundo-post' } },
  ];
}

const { slug } = Astro.params;
---

<h1>{slug}</h1>

Qué hace getStaticPaths

Le dice a Astro qué páginas dinámicas tiene que generar durante el build.

Es clave cuando haces:

• blogs
• glosarios
• fichas de productos
• categorías

Un ejemplo real de estructura útil

Para un blog pequeño:

src/pages/
  index.astro
  blog/
    index.astro
    [slug].astro
  categorias/
    [categoria].astro

Eso ya te permite tener:

• home
• listado de artículos
• detalle de artículo
• página por categoría

Cuándo usar página y cuándo componente

Una pista simple:

• si genera una URL, suele ser una página
• si es una pieza reutilizable dentro de una página, suele ser un componente

En la siguiente lección unimos eso con layouts, componentes y slots para no repetir estructura.