Enrutamiento

Astro utiliza enrutamiento basado en archivos para generar las URLs finales según el contenido de la carpeta src/pages/.

Astro usa elementos HTML estándar <a> para navegar entre rutas. No se proporciona ningún componente <Link> específico en Astro.

<p>Read more <a href="/about/">about</a> Astro!</p>

Los componentes de Astro (.astro) y los archivos Markdown (.md) en la carpeta src/pages se convierten automáticamente en páginas de su proyecto. La ruta de cada página corresponde a la ruta y el nombre del archivo dentro del directorio src/pages.

Los componentes página .astro así como los archivos Markdown y MDX (.md, .mdx) dentro del directorio src/pages/ se convierten automáticamente en páginas de tu sitio web. La ruta de cada página corresponde a su ruta y nombre de archivo dentro del directorio src/pages/.

# Ejemplo: Rutas estáticas
src/pages/index.astro        -> mysite.com/
src/pages/about.astro        -> mysite.com/about
src/pages/about/index.astro  -> mysite.com/about
src/pages/about/me.astro     -> mysite.com/about/me
src/pages/posts/1.md         -> mysite.com/posts/1

Un archivo de página Astro puede especificar parámetros de ruta dinámicos en su nombre para generar múltiples páginas emparejadas. Por ejemplo, src/pages/authors/[author].astro que generará una página por cada autor en tu blog. author se convierte en un parámetro al que puedes acceder dentro de la página.

En el modo de generación estático por defecto de Astro, estas páginas serán generadas en tiempo de compilación, así que deberías definir previamente la lista de authors para ese archivo. En modo SSR, se generará una página bajo petición para cada ruta que coincida.

Debido a que todas las rutas deben definirse en tiempo de compilación, una ruta dinámica debe exportar una función getStaticPaths() que devuelva un array de objetos con una propiedad params. Cada uno de estos objetos generará su ruta correspondiente.

[dogs].astro define el parámetro dinámico dog en su nombre de archivo, así que los objetos devueltos por getStaticPaths() deben incluir dog en sus params. De esta manera la página puede acceder a este parámetro por medio de Astro.params.

---
export function getStaticPaths() {
  return [
    {params: {dog: 'clifford'}},
    {params: {dog: 'rover'}},
    {params: {dog: 'spot'}},
  ];
}

const { dog } = Astro.params;
---
<div>¡Buen chico, {dog}!</div>

Esto generará tres páginas: /dogs/clifford, /dogs/rover y /dogs/spot, cada una mostrando el nombre de perro correspondiente.

El nombre de archivo puede incluir múltiples parámetros, los cuales deben estar todos incluidos en los objetos params de getStaticPaths():

---
export function getStaticPaths () {
 return [
    {params: {lang: 'en', version: 'v1'}},
    {params: {lang: 'fr', version: 'v2'}},
  ];
}

const { lang, version } = Astro.params;
---
...

Esto generará /en-v1/info y /fr-v2/info.

Los parámetros pueden incluirse en distintas partes del path. Por ejemplo, el archivo src/pages/[lang]/[version]/info.astro con la misma getStaticPaths() arriba generará las rutas /en/v1/info y /fr/v2/info.

📚 Lee más sobre getStaticPaths().

Related recipe: Add i18n features (EN)

Si necesitas más flexibilidad en el enrutamiento de la URL, puedes usar un parámetro rest ([...param]) en el nombre de archivo .astro para emparejar rutas de archivos de cualquier profundidad:

---
export function getStaticPaths() {
  return [
    {params: {path: 'uno/dos/tres'}},
    {params: {path: 'cuatro'}},
    {params: {path: undefined }}
  ]
}

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

Esto generará /sequences/uno/dos/tres, /sequences/cuatro y /sequences. (Definir el parámetro restante como undefined permite emparejar con la página del nivel más alto.)

Los parámetros rest pueden usarse con otros parámetros nombrados. Por ejemplo, el visor de archivos de GitHub puede ser representado con la siguiente ruta dinámica:

/[org]/[repo]/tree/[branch]/[...file]

En este ejemplo, una solicitud a /withastro/astro/tree/main/docs/public/favicon.svg daría como resultado los siguientes parámetros con nombre:

{
  org: 'withastro',
  repo: 'astro',
  branch: 'main',
  file: 'docs/public/favicon.svg'
}

En el siguiente ejemplo, un parámetro rest ([...slug]) y la característica props de getStaticPaths() para generar páginas para slugs de diversa profundidad.

---
export async function getStaticPaths() {
  const pages = [
    {
      slug: undefined,
      title: "Tienda de Astro",
      text: "¡Te damos la bienvenida a la tienda de Astro!",
    },
    {
      slug: "products",
      title: "Productos de Astro",
      text: "Tenemos muchos productos para ti",
    },
    {
      slug: "products/astro-handbook",
      title: "El libro definitivo de Astro",
      text: "Si quieres aprender sobre Astro, debes leer este libro.",
    },
  ];
  return pages.map(({ slug, title, text }) => {
    return {
      params: { slug },
      props: { title, text },
    };
  });
}
const { title, text } = Astro.props;
---
<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>{text}</p>
  </body>
</html>

En el modo SSR, las rutas dinámicas se definen de la misma manera: incluyendo [param] o [...path] en corchetes a los nombres de tus archivos para emparejar con strings o paths arbitrarios. Pero, como esas rutas no se compilan con anticipación, la página va a servirse con cualquier ruta que coincida. Como estas no son rutas “estáticas”, no debemos usar getStaticPaths.

---
const { resource, id } = Astro.params;
---
<h1>{resource}: {id}<h1>

Esta página será servida para cualquier valor de resource y id: resources/users/1, resources/colors/blue, etc.

Debido a que las páginas SSR no pueden usar getStaticPaths, no pueden recibir props. El ejemplo anterior puede ser adaptado para el modo SSR buscando el valor del parámetro slug en un objeto. Si la ruta está en la raíz (”/”), el parámetro slug va a ser undefined. Si el valor no existe en el objeto, redirigiremos a una página 404.

---
const pages = [
  {
    slug: undefined,
    title: 'Astro Store',
    text: 'Welcome to the Astro store!',
  },
  {
    slug: 'products',
    title: 'Astro products',
    text: 'We have lots of products for you',
  },
  {
    slug: 'products/astro-handbook',
    title: 'The ultimate Astro handbook',
    text: 'If you want to learn Astro, you must read this book.',
  }
];

const { slug } = Astro.params;
const page = pages.find((page) => page.slug === slug);
if (!page) return Astro.redirect("/404");
const { title, text } = page;
---
<html>
<head>
  <title>{title}</title>
</head>
<body>
  <h1>{title}</h1>
  <p>{text}</p>
</body>
</html>

Es posible que varias rutas coincidan con la misma ruta URL. Por ejemplo, cada una de estas rutas coincidiría con /posts/create:

Astro necesita saber qué ruta debe usarse para construir la página. Para ello, los ordena de acuerdo con las siguientes reglas:

• Las rutas estáticas sin parámetros de ruta tendrán prioridad sobre todas las demás rutas
• Las rutas dinámicas que usan parámetros nombrados tienen prioridad sobre los parámetros rest
• Los parámetros rest tienen la prioridad más baja
• Los empates se resuelven alfabéticamente

Dado el ejemplo anterior, aquí hay algunos ejemplos de cómo las reglas harán coincidir una URL solicitada con la ruta utilizada al compilar el HTML:

• pages/posts/create.astro - Construirá /posts/create
• pages/posts/[pid].astro - Construirá /posts/1, /posts/abc, etc. Pero no /posts/create
• pages/posts/[...slug].astro - Construirá /posts/1/2, /posts/a/b/c, etc. Pero no /posts/create, /mensajes/1, /mensajes/abc

Astro mantiene la paginación automática integrada para grandes colecciones de datos que deben dividirse en varias páginas. Astro incluirá automáticamente metadatos de paginación como la URL de la página anterior/siguiente, el número total de páginas y más.

Los nombres de rutas paginadas deben usar la misma sintaxis [corchete] que una ruta dinámica estándar. Por ejemplo, el nombre de archivo /astronautas/[page].astro generará rutas para /astronautas/1, /astronautas/2, etc., donde [page] es el número de página generado.

Puedes usar la función paginate() para generar estas páginas para un array de valores como este:

---
export async function getStaticPaths({ paginate }) {
  const astronautPages = [{
    astronaut: 'Neil Armstrong',
  }, {
    astronaut: 'Buzz Aldrin',
  }, {
    astronaut: 'Sally Ride',
  }, {
    astronaut: 'John Glenn',
  }];
  // Genera páginas para nuestro array de astronautas, con 2 elementos por página
  return paginate(astronautPages, { pageSize: 2 });
}
// Todos los datos paginados se pasan en la prop "page"
const { page } = Astro.props;
---

<!--Muestra el número de página actual. ¡También puedes utilizar Astro.params.page!-->
<h1>Página {page.currentPage}</h1>
<ul>
  <!--Enumera el array con información sobre astronautas-->
  {page.data.map(({ astronaut }) => <li>{astronaut}</li>)}
</ul>

Esto genera las siguientes páginas, con 2 elementos por página:

• /astronauts/1 - Página 1: muestra “Neil Armstrong” y “Buzz Aldrin”
• /astronauts/2 - Página 2: Muestra “Sally Ride” y “John Glenn”

Cuando usas la función paginate(), a cada página se le pasarán los datos a través de una prop page. La prop page tiene muchas propiedades útiles, pero estas son las más destacadas:

• page.data - array que contiene la porción de datos de página que introdujo a la función paginate()
• page.url.next - enlace a la página siguiente del mismo conjunto de datos
• page.url.prev - enlace a la página anterior del mismo conjunto de datos

---
// Paginar la misma lista de objetos { astronaut } como en el ejemplo anterior
export async function getStaticPaths({ paginate }) { /* ... */ }
const { page } = Astro.props;
---
<h1>Página {page.currentPage}</h1>
<ul>
  {page.data.map(({ astronaut }) => <li>{astronaut}</li>)}
</ul>
{page.url.prev ? <a href={page.url.prev}>Anterior</a> : null}
{page.url.next ? <a href={page.url.next}>Siguiente</a> : null}

interface Page<T = any> {
  /** resultado */
  data: T[];
  /** metadatos */
  /** el recuento del primer elemento de la página, a partir de 0 */
  start: number;
  /** el recuento del último elemento de la página, a partir de 0 */
  end: number;
  /** el número total de resultados */
  total: number;
  /** el número de la página actual, a partir de 1 */
  currentPage: number;
  /** el número de elementos por página (predeterminado: 25) */
  size: number;
  /** el número de la última página */
  lastPage: number;
  url: {
    /** la url de la página actual */
    current: string;
    /** la url de la página anterior (si hay alguna) */
    prev: string | undefined;
    /** la url de la página siguiente (si hay alguna) */
    next: string | undefined;
  };
}

Un caso de uso más avanzado de la paginación es la paginación anidada. Aquí es cuando la paginación se combina con otros parámetros de rutas dinámicas. Puedes usar la paginación anidada para agrupar la colección paginada por alguna propiedad o etiqueta.

Por ejemplo, si prefieres agrupar las publicaciones de Markdown paginadas por alguna etiqueta, usarás la paginación anidada creando una página /src/pages/[tag]/[page].astro que coincida con las siguientes URL:

• /red/1 (tag=red)
• /red/2 (tag=red)
• /blue/1 (tag=blue)
• /green/1 (tag=green)

La paginación anidada funciona devolviendo un array de resultados paginate() de getStaticPaths(), uno para cada grupo.

En el siguiente ejemplo, implementaremos la paginación anidada para crear las URL enumeradas anteriormente:

---
export async function getStaticPaths({paginate}) {
  const allTags = ['red', 'blue', 'green'];
  const allPosts = await Astro.glob('../../posts/*.md');
  // Para cada etiqueta, devuelve un resultado de paginate().
  // Asegúrate de pasar `{params: {tag}}` a `paginate()`
  // Así Astro sabrá qué agrupación de etiquetas usar.
  return allTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) => post.frontmatter.tag === tag);
    return paginate(filteredPosts, {
      params: { tag },
      pageSize: 10
    });
  });
}
const { page } = Astro.props;
const params = Astro.params;

Puedes excluir la generación de páginas o directorios añadiendo el prefijo (_). Los archivos con el prefijo _ no serán reconocidos por el router y no serán generados en el directorio dist/.

Puedes usar esto para inhabilitar páginas temporalmente y también para poner tests, utilidades y componentes en la misma carpeta junto a sus páginas correspondientes.

En este ejemplo, solo src/pages/index.astro y src/pages/posts/post1.md serán generados como rutas y archivos .html.

src/
└── pages/
   ├── _directorio-oculto/
   │   ├── page1.md
   │   └── page2.md
   ├── _pagina-oculta.astro
   ├── index.astro
   └── posts/
       ├── _UnComponente.astro
       ├── _utils.js
       └── post1.md