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

wassfila · Accepted Answer · 2023-04-09 11:55:04Z

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/

Collectives™ on Stack Overflow

Astro.js dynamic routing

1 Answer 1

References

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

References

Comments

Your Answer

Sign up or log in

Post as a guest

Related