No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Enrutamiento: rutas dinámicas

16/25
Recursos

Aportes 13

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¿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.

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;
---
...

.

El parámetro [...slug] se conoce como Parámetro Rest, y ayuda a darle flexibilidad al enrutamiento en Astro. En el archivo [...slug].astro, que se renderiza de forma dinámica, siempre se debe devolver en la sección de JavaScript un objeto con las siguientes claves:

export async function getStaticPaths() {
/*
.
.
*/
return {
      params: { slug },
      props: { title, text }, <------ Aqui pueden ir todas las props que necesites
    };
}
//Fijense que aquí ya puedo sacar las props que retorna la función anterior.
const { title, text } = Astro.props;

Si estoy usando archivos Markdown, usaría el componente <Content /> como lo hizo el profesor en la clase. Si estoy usando archivos en HTML, podría usarlo de esta forma:

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>{text}</p>
  </body>
</html>
Hay un problema con esta clase, ya que los slugs no funcionan. Estos se muestran como **undefined**.
Hola a todos, así pude solucionar el problema de las rutas ya que no viene el slug: ![](https://static.platzi.com/media/user_upload/image-78a426a5-62a9-4fa9-93e2-0cea4f8e8064.jpg)![](https://static.platzi.com/media/user_upload/image-645f5da3-4552-4abf-91f0-63d785220c85.jpg)Favor comentenme las suyas!
Hola buen dia maestro, no me ha quedado lo suficiente claro, y sigo la actvidad como en el video pero no se si haya cambiado de version que no logre dar con la respuesta de este punto. Selecciono una ruta y aparce undefined ![]()![](C:\Users\CarlosEMaciasG\Desktop\undefined.png)![](https://static.platzi.com/media/user_upload/image-96c4a07e-9b51-45cb-aa78-42f1ebc31513.jpg) ![](https://static.platzi.com/media/user_upload/image-949b3da8-8858-4023-b5f0-542d480f963c.jpg) dejo un link de mi repositorio <https://github.com/maciasgCarlos/astrobuildcurso.git>
alguna sugerencia o solución al enrutamiento, ya que seguí los pasos y puse el código pero no siempre me arroja el error 404. \---import { getCollection } from "astro:content"; export async function getStaticPaths() {  const posts = await getCollection("tips");   return posts.map((post) => ({    params: { slug: post.slug },     props: post,   }));} const post = Astro.props;const { Content } = await post.render();---    \<Content />
El problema de la ruta es por que estamos buscando en *post.data.slug* y esto nos regresa un undefined, ya que en data no existe slug, si no que esta por fuera. Esto se puede ver gracias al *console.log(posts)* que hicimos. ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-14%20124644-79e04f78-2ca1-467c-9752-48bcc6510ec9.jpg)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-14%20125306-cb0d631d-f97d-4a89-a02c-33c209d8703d.jpg)

getStaticPaths()

  • Esta función debe retornar una lista de rutas que Astro pre-renderizará en el momento de la construcción del sitio.

  • Al implementar getStaticPaths, esta debe exportarse desde el archivo de la página dinámica [ejem].astro

  • Durante la fase de construcción, Astro invoca getStaticPaths para cada ruta dinámica, genera cada página estática basándose en los paths retornados y los parámetros correspondientes.

  • Esta función debe retornar un array de objetos, donde cada objeto tiene una propiedad params que define los parámetros de la ruta, tambien puede retornar props (metadatos)

  • Para desestrucutrar los parametros o props de la funcion getStaticPaths, se usa const { path } = Astro.params; paths, puede tomar cualquier otro nombre

// Importa la función getCollection desde el módulo "astro:content"
import { getCollection } from "astro:content";

// Define una función asíncrona para obtener las rutas estáticas
export async function getStaticPaths() {
  // Obtiene una colección de datos llamada "tips"
  const posts = await getCollection("tips");

  // Mapea los datos y devuelve un array de objetos con propiedades "params" y "props"
  return posts.map((post) => ({
    params: { slug: post.slug }, // Cada objeto tiene un parámetro "slug"
    props: post, // Cada objeto tiene todas las propiedades del post
  }));
}

// Asigna el objeto "props" de Astro a la variable "post"
const post = Astro.props;

// Utiliza la función "render" del objeto "post" para obtener la propiedad "Content"
const { Content } = await post.render();

// Finalmente, renderiza el componente "Content"
<Content />
<https://github.com/Liottaap/astrobuild.tips.git> Hola buen dia... No me sale lo de las rutas dinámicas. Acá comparto mi código. Me sale un error en index.astro y en post.astro ¿Me podrían ayudar?![](https://static.platzi.com/media/user_upload/image-c24435a5-8d17-4664-80ea-fdd5ae69ae1f.jpg) ![](https://static.platzi.com/media/user_upload/image-01ae5004-f73f-42e9-96ad-443dc3140f53.jpg)
<https://github.com/Liottaap/astrobuild.tips.git> Hola buen dia... No me sale lo de las rutas dinámicas. Acá comparto mi código. Me sale un error en index.astro y en post.astro![](https://static.platzi.com/media/user_upload/image-2afaf6a6-409b-4851-b2f0-afca41cb64ac.jpg)![](https://static.platzi.com/media/user_upload/image-a6e1f190-55a2-43e0-9f25-cc14953a23be.jpg)
Veo que algunos tienen problemas, yo también los tuve, antes de que entren a la pagina y vean un 404, asegúrense de que su dirección este asi:![](https://static.platzi.com/media/user_upload/image-af9ae8ab-c28a-42bf-9724-700fb16f7f7e.jpg) Si no está asi les va a salir el error jejeje.