Astro.js dynamic routing

Question

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 he 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 } };
    }

score 3 · Answer 1 · answered Apr 09 '23 at 11:55

Here are some solutions to fix the provided code

Astro.js does not have getStaticProps export function but the code to run should be together with the getStaticPaths() export in the front matter section of .astro file which is between --- ---
you are concatenating two arrays, one of them has id and one of them has language, that makes a heterogeneous array while so in the final concatenated array all items should have both id and language to feed the Astro.params

const { id, language } = Astro.params;

Another point, it is possible to combine languages in a dynamic path, but then you would need separate parameters like follows src/pages/[lang]/blog/[...slug].astro

References

for a better understanding of Astro Dynamic routes it is possible to refer to the official documentation https://docs.astro.build/en/core-concepts/routing/#dynamic-routes
for content with languages variations see the i18n recipe https://docs.astro.build/en/recipes/i18n/

Astro.js dynamic routing

1 Answers1

References