#How do I implement nested pages with getStaticPaths()?

4 messages · Page 1 of 1 (latest)

vagrant narwhal
#

I have a project where I hae multiple guilds. I can render each detail page adding getStaticPaths(). No I want a sub page for each guild with information for territory battles. it doesn't get nested, what is my error? I have src/pages/guild/[slub].astro and src/pages/guild/tb/[slug].astro
My static path is as follows:

export async function getStaticPaths() {
    const response = await fetch("http://localhost:8080/guilds/tb");
    const tbs = await response.json();

    return tbs.territoryBattle.map((tb) => {
        return {
            params: { slug: tb.name },
            props: { tb },
        };
    });
}```
idle merlinBOT
#

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

#

Based on the information provided in the extracts, it seems like you're on the right track with your getStaticPaths() function. However, there might be a misunderstanding about how Astro handles nested dynamic routes.

In Astro, the getStaticPaths() function is used to generate static pages for dynamic routes. For nested dynamic routes, you would need to include all the dynamic parts in the params object returned by getStaticPaths().

For example, if you have a file at src/pages/guild/tb/[slug].astro, your getStaticPaths() function should return something like this:

export async function getStaticPaths() {
    const response = await fetch("<http://localhost:8080/guilds/tb">);
    const tbs = await response.json();

    return tbs.territoryBattle.map((tb) => {
        return {
            params: { slug: ['guild', 'tb', tb.name] },
            props: { tb },
        };
    });
}

In this example, the slug parameter is an array that includes all the parts of the path. This tells Astro to generate pages like /guild/tb/tb-name.

Remember, the value for each params object must match the parameters used in the page name. For more information, you can refer to the Astro documentation on routing and dynamic routes (https://docs.astro.build/en/core-concepts/routing#static-ssg-mode).

If you're still having trouble, it might be helpful to check if there are any open issues related to this on the Astro GitHub page (https://github.com/withastro/astro/issues).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vagrant narwhal kapa.ai is still learning and improving, please let us know how it did by reacting below