#GetStaticPaths error

1 messages · Page 1 of 1 (latest)

elfin galleon
#

Tengo este [...slug].astro

---
import type { GetStaticPaths } from 'astro';
import Layout from '../layouts/Layout.astro';

export const getStaticPaths = (async () => {
  const contributors = [
    { username: 'Waxer59' },
    { username: 'dreyfus' },
    { username: 'mardroide' }
  ];
  return contributors.map((contributor) => {
    return {
      params: {
        username: contributor.username
      },
      props: { contributor }
    };
  });
}) satisfies GetStaticPaths;

const { username } = Astro.params;
const { contributor } = Astro.props;
---

<Layout title={`Astro Community Recap - ${username}`}>
  <h1>Contributor: {contributor}</h1>
</Layout>

Y me sale el siguiente error:

20:21:00 [WARN] [router] A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/dreyfus`.

Possible dynamic routes being matched: src/pages/[...slug].astro.
20:21:00 [404] /dreyfus 1ms
nocturne hareBOT
#

Hi @elfin galleon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

El error que estás experimentando se debe a que estás intentando acceder a una ruta dinámica (/dreyfus) que no se ha definido correctamente en tu función getStaticPaths().

La función getStaticPaths() es necesaria para las rutas dinámicas en Astro. Esta función debe devolver un array de objetos, cada uno con un objeto params que contiene los parámetros de ruta dinámicos. En tu caso, estás devolviendo correctamente este array, pero parece que hay un problema con la forma en que se está utilizando en la ruta.

Además, parece que estás intentando utilizar Astro.props para acceder a los datos del contribuidor, pero estos datos no se están pasando correctamente. Deberías pasar los datos del contribuidor en el objeto props que se devuelve en getStaticPaths().

Aquí tienes un ejemplo de cómo podría verse tu código:

---
import type { GetStaticPaths } from 'astro';
import Layout from '../layouts/Layout.astro';

export const getStaticPaths: GetStaticPaths = async () => {
  const contributors = [
    { username: 'Waxer59' },
    { username: 'dreyfus' },
    { username: 'mardroide' }
  ];
  return contributors.map((contributor) => {
    return {
      params: {
        slug: [contributor.username]
      },
      props: { contributor }
    };
  });
};

const { slug } = Astro.params;
const { contributor } = Astro.props;
---

<Layout title={`Astro Community Recap - ${slug}`}>
  <h1>Contributor: {contributor.username}</h1>
</Layout>

En este código, he cambiado username a slug en Astro.params y he ajustado la forma en que se accede a los datos del contribuidor en Astro.props. También he cambiado la forma en que se devuelven los parámetros de ruta en getStaticPaths() para que slug sea un array, que es lo que espera Astro para las rutas dinámicas.