dynamic-routingastrojs

Astro.js dynamic routing

I am trying to create dynamic routes using astro.js. I managed to display the data, however when I am trying to access each object of the data and see some details, I get this error:

A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/en/courses/1`.

Possible dynamic routes being matched: src/pages/[language]/courses/[id].astro.
10:33:59 PM [serve]    404               /en/courses/1

This is the code I have within [id].astro

export async function getStaticPaths() {
    const languageEntries = await getCollection("languages");
      const languagePaths = languageEntries.map((entry) => ({
        params: { language: entry.slug },
      }));

      const coursePaths = data.map((course) => ({
        params: { id: course.Id },
      }));

        console.log(coursePaths);
        return [...languagePaths, ...coursePaths];
    }

    const { id, language } = Astro.params;

    export async function getStaticProps({ params }) {
      console.log(params.id);
      const courses = data;
      const course = courses.find((c) => c.Id.toString() === params.id);

      return { props: { course } };
    }
Solution

  • Here are some solutions to fix the provided code

    const { id, language } = Astro.params;

    References