Saltar al contenido

Referencia de Routing

No hay una configuración de routing separada en Astro.

Cada archivo de página soportado ubicado dentro del directorio especial src/pages/ crea una ruta. Cuando el nombre del archivo contiene un parámetro, una ruta puede crear múltiples páginas dinámicamente, de lo contrario crea una sola página.

Por defecto, todas las rutas de página y endpoints de Astro se generan y prerenderizan en el momento del build. El renderizado del lado del servidor bajo demanda puede configurarse para rutas individuales, o como valor por defecto.

prerender

Sección titulada “prerender”

Tipo: boolean
Por defecto: true en modo static (por defecto); false con la configuración output: 'server'

Añadido en: astro@1.0.0

Un valor exportado desde cada ruta individual para determinar si está o no prerenderizado.

Por defecto, todas las páginas y endpoints están prerenderizados y serán generados estáticamente en el momento del build. Puedes optar por no prerenderizar una o más rutas, y puedes tener tanto rutas estáticas como renderizadas bajo demanda en el mismo proyecto.

Sobrescritura por página

Sección titulada “Sobrescritura por página”

Puedes sobrescribir el valor por defecto para habilitar el renderizado bajo demanda para una ruta individual exportando prerender con el valor false desde ese archivo:

src/pages/rendered-on-demand.astro
---
export const prerender = false
---
<!-- server-rendered content -->
<!-- the rest of my site is static -->

Cambiar a modo server

Sección titulada “Cambiar a modo server”

Puedes sobrescribir el valor por defecto para todas las rutas configurando output: 'server'. En este modo de output, todas las páginas y endpoints se generarán en el servidor bajo solicitud por defecto en lugar de ser prerenderizados.

En modo server, habilita el prerenderizado para una ruta individual exportando prerender con el valor true desde ese archivo:

src/pages/static-about-page.astro
---
// with `output: 'server'` configured
export const prerender = true
---
<!-- My static about page -->
<!-- All other pages are rendered on demand -->

partial

Sección titulada “partial”

Type: boolean
Default: false

Añadido en: astro@3.4.0

Un valor exportado desde una ruta individual para determinar si debería renderizarse como una página HTML completa.

Por defecto, todos los archivos ubicados dentro del directorio reservado src/pages/ incluyen automáticamente la declaración <!DOCTYPE html> y contenido adicional en <head> como los estilos y scripts scoped de Astro.

Puedes sobrescribir el valor por defecto para designar el contenido como un partial de página para una ruta individual exportando un valor para partial desde ese archivo:

src/pages/my-page-partial.astro
---
export const partial = true
---
<!-- Generated HTML available at a URL -->
<!-- Available to a rendering library -->

El export const partial debe ser identificable estáticamente. Puede tener el valor de:

  • El booleano true.
  • Una variable de entorno usando import.meta.env como import.meta.env.USE_PARTIALS.

getStaticPaths()

Sección titulada “getStaticPaths()”

Tipo: (options: GetStaticPathsOptions) => Promise<GetStaticPathsResult> | GetStaticPathsResult

Añadido en: astro@1.0.0

Una función para generar múltiples rutas de página prerenderizadas desde un solo componente de página .astro con uno o más parámetros en su ruta de archivo. Usa esto para rutas que se crearán en el momento del build, también conocido como generación de sitio estático.

La función getStaticPaths() debe devolver un array de objetos para determinar qué rutas URL serán prerenderizadas por Astro. Cada objeto debe incluir un objeto params, para especificar las rutas. El objeto puede contener opcionalmente un objeto props con datos a pasar a cada plantilla de página.

src/pages/blog/[post].astro
---
// In 'server' mode, opt in to prerendering:
// export const prerender = true


export async function getStaticPaths() {
  return [
    // { params: { /* required */ }, props: { /* optional */ } },
    { params: { post: '1' } }, // [post] is the parameter
    { params: { post: '2' } }, // must match the file name
    // ...
  ];
}
---
<!-- Your HTML template here. -->

getStaticPaths() también puede usarse en endpoints de archivos estáticos para routing dinámico.

params

Sección titulada “params”

La clave params de cada objeto en el array devuelto por getStaticPaths() le dice a Astro qué rutas construir.

Las claves en params deben coincidir con los parámetros definidos en la ruta de tu archivo de componente. El valor para cada objeto params debe coincidir con los parámetros usados en el nombre de la página. Los params se codifican en la URL, por lo que solo se soportan strings como valores.

Por ejemplo, src/pages/posts/[id].astro tiene un parámetro id en su nombre de archivo. La siguiente función getStaticPaths() en este componente .astro le dice a Astro que genere estáticamente posts/1, posts/2, y posts/3 en el momento del build.

src/pages/posts/[id].astro
---
export async function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } }
  ];
}


const { id } = Astro.params;
---
<h1>{id}</h1>

Pasar datos con props

Sección titulada “Pasar datos con props”

Para pasar datos adicionales a cada página generada, puedes establecer un valor props en cada objeto del array devuelto por getStaticPaths(). A diferencia de los params, los props no se codifican en la URL y por lo tanto no están limitados a solo strings.

Por ejemplo, si generas páginas con datos obtenidos de una API remota, puedes pasar el objeto de datos completo al componente de página dentro de getStaticPaths(). La plantilla de página puede referenciar los datos de cada post usando Astro.props.

src/pages/posts/[id].astro
---
export async function getStaticPaths() {
  const response = await fetch('...');
  const data = await response.json();


  return data.map((post) => {
    return {
      params: { id: post.id },
      props: { post },
    };
  });
}


const { id } = Astro.params;
const { post } = Astro.props;
---
<h1>{id}: {post.name}</h1>

routePattern

Sección titulada “routePattern”

Type: string

Añadido en: astro@5.14.0

Una propiedad disponible en las opciones de getStaticPaths() para acceder al routePattern actual como string.

Esto proporciona datos del context de renderizado de Astro que de otra manera no estarían disponibles dentro del scope de getStaticPaths() y puede ser útil para calcular los params y props para cada ruta de página.

routePattern siempre refleja la definición original del segmento dinámico en la ruta del archivo (ej. /[...locale]/[files]/[slug]), a diferencia de params, que son valores explícitos para una página (ej. /fr/fichiers/article-1/).

El siguiente ejemplo muestra cómo localizar tus segmentos de ruta y devolver un array de rutas estáticas pasando routePattern a una función helper personalizada getLocalizedData(). El objeto params se establecerá con valores explícitos para cada segmento de ruta: locale, files, y slug. Luego, estos valores se usarán para generar las rutas y pueden usarse en tu plantilla de página vía Astro.params.

src/pages/[...locale]/[files]/[slug].astro
---
import { getLocalizedData } from "../../../utils/i18n";


export async function getStaticPaths({ routePattern }) {
  const response = await fetch('...');
  const data = await response.json();


  console.log(routePattern); // [...locale]/[files]/[slug]


  // Call your custom helper with `routePattern` to generate the static paths
  return data.flatMap((file) => getLocalizedData(file, routePattern));
}


const { locale, files, slug } = Astro.params;
---

paginate()

Sección titulada “paginate()”

Añadido en: astro@1.0.0

Una función que puede devolverse desde getStaticPaths() para dividir una colección de elementos de contenido en páginas separadas.

paginate() generará automáticamente el array necesario para devolver desde getStaticPaths() para crear una URL por cada página de tu colección paginada. El número de página se pasará como un param, y los datos de la página se pasarán como un prop page.

El siguiente ejemplo obtiene y pasa 150 elementos a la función paginate, y crea páginas estáticas prerenderizadas en el momento del build que mostrarán 10 elementos por página:

src/pages/pokemon/[page].astro
---
export async function getStaticPaths({ paginate }) {
  // Load your data with fetch(), getCollection(), etc.
  const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
  const result = await response.json();
  const allPokemon = result.results;


  // Return a paginated collection of paths for all items
  return paginate(allPokemon, { pageSize: 10 });
}


const { page } = Astro.props;
---

paginate() tiene los siguientes argumentos:

  • data - array que contiene los datos de la página pasados a la función paginate()
  • options - Optional object with the following properties:
    • pageSize - El número de elementos mostrados por página (10 por defecto)
    • params - Envía parámetros adicionales para crear rutas dinámicas
    • props - Envía props adicionales para que estén disponibles en cada página

paginate() asume un nombre de archivo [page].astro o [...page].astro. El param page se convierte en el número de página en tu URL:

  • /posts/[page].astro generaría las URLs /posts/1, /posts/2, /posts/3, etc.
  • /posts/[...page].astro generaría las URLs /posts, /posts/2, /posts/3, etc.

El prop page de paginación

Sección titulada “El prop page de paginación”

Type: Page<TData>

La paginación pasará un prop page a cada página renderizada que representa una sola página de datos en la colección paginada. Esto incluye los datos que has paginado (page.data) así como metadatos para la página (page.url, page.start, page.end, page.total, etc). Estos metadatos son útiles para cosas como un botón de "Página Siguiente" o un mensaje de "Mostrando 1-10 de 100".

page.data
Sección titulada “page.data”

Type: Array<TData>

Array de datos devuelto desde la función paginate() para la página actual.

page.start
Sección titulada “page.start”

Type: number

Índice del primer elemento en la página actual, comenzando en 0. (ej. si pageSize: 25, esto sería 0 en la página 1, 25 en la página 2, etc.)

page.end
Sección titulada “page.end”

Type: number

Índice del último elemento en la página actual.

page.size
Sección titulada “page.size”

Type: number
Default: 10

El número total de elementos por página.

page.total
Sección titulada “page.total”

Type: number

El número total de elementos en todas las páginas.

page.currentPage
Sección titulada “page.currentPage”

Type: number

El número de página actual, comenzando con 1.

page.lastPage
Sección titulada “page.lastPage”

Type: number

El número total de páginas.

page.url.current
Sección titulada “page.url.current”

Type: string

Obtiene la URL de la página actual (útil para URLs canónicas). Si se establece un valor para base, la URL comienza con ese valor.

page.url.prev
Sección titulada “page.url.prev”

Type: string | undefined

Obtiene la URL de la página anterior (será undefined si estás en la página 1). Si se establece un valor para base, antepone la ruta base a la URL.

page.url.next
Sección titulada “page.url.next”

Type: string | undefined

Obtiene la URL de la página siguiente (será undefined si no hay más páginas). Si se establece un valor para base, antepone la ruta base a la URL.

page.url.first
Sección titulada “page.url.first”

Type: string | undefined

Añadido en: astro@4.12.0

Obtiene la URL de la primera página (será undefined si estás en la página 1). Si se establece un valor para base, antepone la ruta base a la URL.

page.url.last
Sección titulada “page.url.last”

Type: string | undefined

Añadido en: astro@4.12.0

Obtiene la URL de la última página (será undefined si no hay más páginas). Si se establece un valor para base, antepone la ruta base a la URL.

Contribuir Comunidad Patrocinar