Volver al inicio
Lección 3: Rutas y Páginas

Rutas y Páginas Automáticas

Aprende cómo funciona el sistema de routing automático de Astro basado en archivos

¿Qué hace especial el routing en Astro?

En Astro NO necesitas configurar rutas manualmente. El sistema de routing es automático basado en la estructura de carpetas en src/pages/.

Regla simple: Cada archivo .astro, .md, o .html en src/pages/ se convierte automáticamente en una ruta de tu sitio.

1. Rutas básicas (estáticas)

Cómo funcionan:

El nombre del archivo se convierte en la URL. Es así de simple.

Archivo en tu proyecto:

src/pages/index.astro
src/pages/about.astro
src/pages/contact.astro
src/pages/blog/index.astro
src/pages/blog/primera-entrada.astro

URL generada:

/
/about
/contact
/blog
/blog/primera-entrada

Nota: index.astro siempre se convierte en la ruta raíz de su carpeta. Por ejemplo, blog/index.astro/blog

4. Página 404 personalizada

Para crear una página de error 404 personalizada, simplemente crea:

src/pages/404.astro
1---
2// src/pages/404.astro
3---
4
5<!DOCTYPE html>
6<html lang="es">
7<head>
8 <meta charset="UTF-8">
9 <title>404 - Página no encontrada</title>
10</head>
11<body>
12 <div class="error-404">
13 <h1>404</h1>
14 <p>¡Oops! Esta página no existe.</p>
15 <a href="/">Volver al inicio</a>
16 </div>
17</body>
18</html>

Resultado: Cuando alguien visite una ruta que no existe, verá esta página automáticamente.

5. Resumen de tipos de rutas

✓ Rutas estáticas

about.astro

/about

blog/index.astro

/blog

⚡ Rutas dinámicas

[id].astro

/:id

[...slug].astro

/cualquier/ruta