Una vez que conocemos la sintaxis de un componente, la siguiente pregunta lógica es: ¿Cómo convierto ese componente en una página web accesible mediante una URL?
Este proceso es lo que llamamos Routing
En otros frameworks o librerías, configurar las rutas puede ser un dolor de cabeza: archivos de configuración, definir paths, asignar componentes…
En Astro esto es mucho más sencillo. Astro sigue una tendencia muy actual, que es simplemente utilizar un sistema de enrutamiento basado en archivos.
¿Lo qué? Premisa simple: La estructura de archivos en tu disco proyecto define la estructura de URLs de tu sitio web.
La carpeta src/pages
Todo ocurre dentro de src/pages/. Astro se basa en el contenido de esta carpeta para crear tus web. Si pones un archivo compatible ahí dentro, Astro generará automáticamente una ruta para él.
Astro soporta los siguientes formatos como páginas:
.astro(Componentes estándar).mdy.mdx(Markdown para contenido).html(HTML puro).js/.ts(Para endpoints de API, lo veremos más adelante)
Esta forma de Routing tiene la ventaja de que es muy fácil para el desarrollador. Puedes revisar, copiar, pegar, renombrar… Lo que veas como ficheros, después serán web. Así de sencillo.
Rutas estáticas básicas
Lo vemos con un ejemplo. Supongamos que tenemos esta estructura de archivos:
src/pages/ ├── index.astro ├── contacto.astro └── sobre-mi.astro
Esto generará automáticamente las siguientes URLs. ¡Más fácil ni puede ser!
| Archivo | Ruta generada (URL) |
|---|---|
src/pages/index.astro | / (Página de inicio) |
src/pages/contacto.astro | /contacto |
src/pages/sobre-mi.astro | /sobre-mi |
Como vemos, index es una palabra reservada que indica la raíz del directorio actual.
Subdirectorios y rutas anidadas
¿Qué pasa si queremos organizar mejor nuestro sitio? Puede que nuestra estructura no sea tan sencilla como un único nivel.
Por ejemplo, si tenemos un blog o una sección de servicios. Podemos crear carpetas dentro de src/pages/ y Astro las respetará en la URL.
Imaginemos esta estructura:
src/pages/ ├── index.astro └── blog/ ├── index.astro ├── noticia-1.md └── noticia-2.md
El resultado será:
src/pages/index.astro➡/(La home de tu web)src/pages/blog/index.astro➡/blog(La portada del blog)src/pages/blog/noticia-1.md➡/blog/noticia-1src/pages/blog/noticia-2.md➡/blog/noticia-2
Es una buena práctica mantener los nombres de archivos y carpetas en minúsculas y usar guiones (kebab-case).
Las URLs distinguen entre mayúsculas y minúsculas en muchos servidores, y su usas mayúsculas o espacios… en algún momento te va a petar, casi seguro 😊
Enlazando páginas
A diferencia de las SPAs (Single Page Applications) que requieren componentes especiales como <Link> o <RouterLink> para navegar sin recargar la página.
Astro apuesta por el estándar web. Para enlazar páginas usamos simplemente la etiqueta <a> de HTML.
<p>
Visita mi <a href="/blog">Blog</a> o
<a href="/contacto">contáctame</a>.
</p>
¿Y la velocidad?
Te estarás preguntando: “Si uso <a>, ¿no recargará la página entera y será lento?”
Astro es tan ligero y el HTML que genera está tan optimizado que la navegación se siente instantánea.
Además, más adelante veremos las View Transitions, que convierten esta navegación estándar en una experiencia fluida tipo SPA sin cambiar tu código.
Página 404 Personalizada
¿Qué ocurre si un usuario intenta entrar en /esta-ruta-no-existe? Por defecto, Astro mostrará una página de error genérica simple.
Generalmente esto no es lo que queremos. Nosotros queremos nuestra página 404 personalizada.
Para ello, solo tenemos que crear un archivo especial llamado 404.astro (o 404.md) directamente en src/pages/.
---
// src/pages/404.astro
import Layout from '../layouts/Layout.astro';
---
<Layout title="404: No encontrado">
<div class="error-container">
<h1>¡Vaya!</h1>
<p>Parece que te has perdido en el espacio.</p>
<a href="/">Volver a la base (Inicio)</a>
</div>
</Layout>
Astro detectará este archivo y lo servirá automáticamente cuando no encuentre una ruta coincidente.
Excluir archivos
A veces queremos tener un archivo dentro de pages pero que no se convierta en una ruta (por ejemplo, un archivo de pruebas o un borrador).
Para que Astro ignore un archivo, simplemente añade un guion bajo _ al principio del nombre.
src/pages/_borrador.astro➡ No genera rutasrc/pages/blog/_logica.js➡ No genera ruta
