Enrutamiento: rutas dinámicas
Para Astro, una ruta dinámica será de aquella posea por nombre un parámetro para generar varias páginas coincidentes.
.
Por ejemplo, ./src/pages/authors/[author].astro genera una ruta dinámica para cada autor.
.
Modo estático SSG
✨ Concepto clave
En la generación dinámica por rutas estáticas (Server-Site-Generation, SSG), se generan páginas al momento de compilación del proyecto basados en una lista de elementos.
.
En este modo de despliegue, Astro requiere de una referencia para generar la rutas. Por ello, se requiere de una función getStaticPaths() para indicar que dicha página será procesada y resuelta en tiempo de compilación.
---
export function getStaticPaths() {
return [
{params: {dog: 'clifford'}},
{params: {dog: 'rover'}},
{params: {dog: 'spot'}},
];
}
const { dog } = Astro.params;
---
<div>Good dog, {dog}!</div>
En el ejemplo, vemos la función getStaticPaths() que tomará una lista como referencia para la generación de rutas a partir del directorio dogs .
.
[perro].astro define el parámetro dog dinámico por nombre del archivo, por lo que los objetos devueltos por getStaticPaths() deben incluir dog para resolver la ruta.
.
Adicionalmente, podemos acceder a este parámetro usando Astro.params como metadata a lo largo de la colección de la ruta.
.
✨ Concepto clave
Podemos generar mediante SSG, contenido por directorios al definir:
./src/pages/[lang]-[version]/info.astro- como ruta- Como código
--- export function getStaticPaths () { return [ {params: {lang: 'en', version: 'v1'}}, {params: {lang: 'fr', version: 'v2'}}, ]; } const { lang, version } = Astro.params; --- ...
.
Parámetros destructurados (Rest Parameters)
Con este modo de generación de rutas, podemos emplear una mayor flexibilidad al definir nuestras estructuras para mezclar por nombre o atributos un conjunto de metadata.
.
Por ejemplo:
---
export function getStaticPaths() {
return [
{
author: 'robert-martin',
tag: 'software',
title: 'clean-code/introduction',
}
]
}
const { path } = Astro.params;
---
...
Generando una estructura de rutas de la siguiente forma:
./src/pages/robert-martin/software/clean-code/introduction.asto
.
✨ Concepto clave
Es posible omitir la extensión para que dicha destructuración dicte dicho requerimiento:
./src/pages/[author]/[tag]/[...file]para la ruta- Como código
--- export function getStaticPaths() { return [ { author: 'robert-martin', tag: 'software', file: 'clean-code/introduction.astro', } ] } const { path } = Astro.params; --- ...
.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?