Nested Routing [subpage2]/[...index].astro

This subpage demonstrates the implementation of dynamic routing in an Astro project with internationalization. It uses URL structure /dynamic-routing/subpage-2 for English, which automatically converts to the Slovenian version /sl/dinamicno-usmerjanje/podstran-2. Below you can see the actual code that enables this functionality.

// Get current language from URL
export function getStaticPaths() {
    return [
        // English route: /dynamic-routing/subpage-2
        // [dyn_routing] = "dynamic-routing" matches the folder name
        // [subpage2] = "subpage-2" is the specific subpage
        // [...index] = undefined means no additional URL segments
        {
            params: {
                dyn_routing: "dynamic-routing",
                subpage2: "subpage-2",
                index: undefined,
            },
            props: { lang: "en" },
        },
        // Slovenian route: /sl/dinamicno-usmerjanje/podstran-2
        // [dyn_routing] = "sl" acts as language prefix in URL
        // [subpage2] = "dinamicno-usmerjanje" is the localized "dynamic-routing" path
        // [...index] = "podstran-2" captures the localized subpage name
        // This creates the final URL: /sl/dinamicno-usmerjanje/podstran-2
        {
            params: {
                dyn_routing: "sl",
                subpage2: "dinamicno-usmerjanje",
                index: "podstran-2",
            },
            props: { lang: "sl" },
        },
    ];
}

Component Example

Below is an example of a reusable component that can be integrated into any page. This component is built using Svelte and demonstrates how to pass translations as props for dynamic content rendering.