CodeAventura
Astro
▸Bienvenido a Astro▸El sistema de archivos como router

Misión

●iniciando…
Astro
Preparando entorno

Esto solo ocurre la primera vez que abres el curso.

03 / 22El sistema de archivos como router
Anterior

El sistema de archivos como router

Cero configuración para crear páginas

En Astro, la regla es simple: cada archivo .astro (o .md, .mdx) dentro de src/pages/ se convierte en una URL. No hay que registrar nada, ni configurar rutas, ni declarar arrays de paths.

Crear una página nueva es literalmente crear un archivo nuevo. Renombrar es renombrar.

Las carpetas son segmentos

Si metes archivos dentro de carpetas, esas carpetas pasan a formar parte de la URL. La página index de cada carpeta es la "raíz" de ese segmento:

  • src/pages/blog/index.astro → /blog
  • src/pages/blog/post.astro → /blog/post

Enlaces internos: <a href> normal

Astro no inventa una API de routing: los enlaces internos son etiquetas <a> con href relativo o absoluto.

Sin componentes mágicos. El navegador hace una navegación tradicional (con todas las ventajas: cacheo, recarga, vuelta atrás del navegador). Si más adelante quieres transiciones suaves entre páginas, las añades con un solo componente — lo veremos en la lección 19.

Páginas dinámicas

Para URLs dinámicas (como /posts/1, /posts/2...) Astro usa archivos con corchetes en el nombre: [id].astro. Lo veremos a fondo en la lección 13. Por ahora, quédate con la idea: el sistema de archivos también modela parámetros.

¿Y los archivos que no son .astro?

  • .md y .mdx también se convierten en páginas (perfecto para blog posts).
  • .html se sirve tal cual.
  • .ts o .js dentro de pages/ son endpoints (devuelven JSON, RSS, sitemaps...), no páginas visibles.

Tu desafío 🚀

Tienes dos archivos en el editor:

  1. src/pages/index.astro (página /)
  2. src/pages/sobre-mi.astro (página /sobre-mi, que está vacía)

Tu trabajo:

  • En sobre-mi.astro: rellena el <body> con un <h1> con tu nombre y al menos un <p> con algo sobre ti.
  • En index.astro: añade un enlace <a href="/sobre-mi">Conóceme</a> (el texto puede ser el que quieras).

Lo importante es que ambas páginas existan y que estén enlazadas. Si haces clic en el enlace en el preview, deberías ver la nueva página.