¿No te quedo del todo claro como funcionan las rutas dinamicas?
Prepare un ejemplo usando Pokemons🦖 y sin colecciones para hacerlo más fácil de comprender.
Te dejo los docs ➡️ https://docs.astro.build/en/core-concepts/routing/
Para el ejemplo tenemos el archivo [pokemon].astro dentro del directorio pokemon y este dentro de nuestro directorio pages.
📂pages
📂pokemon
📄[pokemon].astro ← Aquí
En este archivo usamos [pokemon] para determinar que pokemon será un parametro dinamico. Esto significa que la función getStaticPaths() dentro de este archivo deberá incluir el atributo pokemon dentro de sus params.
Ej: ://localhost/pokemon/[el_nombre_del_pokemon]
El archivo [pokemon].astro contiene lo siguiente:
---
export async function getStaticPaths() {
return [ // Debe siempre retornar una lista
{params: {pokemon: 'bulbasaur'}, props: {type:'planta'}}, // Usando props (opcional)
{params: {pokemon: 'charmander'}, props: {type:'fuego'}},
{params: {pokemon: 'squirtle'}, props: {type:'agua'}},
{params: {pokemon: 'caterpie'}, props: {type:'insecto'}},
{params: {pokemon: 'pidgey'}, props: {type:'vuelo'}}
];
}
const { pokemon } = Astro.params; // Recibimos el pokemon (solo puede ser uno de los listados en el return de la función getStaticPaths)
const { type } = Astro.props; // Recibimos los props (estamos recibiendo props.type pero para acortarlo usamod {type})
---
<h1 class="text-center p-4 bg-red-400 text-white font-bold">
Tu {pokemon} es tipo {type}
</h1>
(borra los comentarios que hize si vas a copiar y pegar este código en tu editor)
🔥 La función getStaticPaths() debe siempre retornar un array. 🔥
Si intentamos acceder a un pokemon no declarado directamente obtendremos un error ya que debido a que usamos SSG (por defecto en Astro) solo los declarados en el array dentro de la función getStaticPaths serán renderizados.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.