setDynamicParams

When having dynamic params in your routes (like src/routes/blog/[slug]), you need to manually specify the equivalent params in other locales. That will then be passed to switchLocalePath and getSwitcherData. This is particularly useful if you have different corresponding slugs per locale. For example if you want:

Directoryblog/
- hello-world
Directoryfr/
- Directoryle-blog/
  - bonjour-le-monde

1
---
2
import type { GetStaticPaths } from "astro";
3
import { setDynamicParams, getLocalePlaceholder, t } from "i18n:astro";
4

5
export const getStaticPaths = (() => {
6
    const locale = getLocalePlaceholder();
7

8
    const slugs = [
9
        {
10
            en: "hello-world",
11
            fr: "bonjour-le-monde",
12
        },
13
        // ...
14
    ];
15

16
  return slugs.map((slug) => ({
17
    params: {
18
      slug: slug[locale],
19
    },
20
    props: {
21
      slugs: slug,
22
    },
23
  }));
24
}) satisfies GetStaticPaths;
25

26
const { slug } = Astro.params;
27
const { slugs } = Astro.props;
28

29
setDynamicParams(
30
  Object.entries(slugs).map(([locale, slug]) => ({ locale, params: { slug } }))
31
);
32
---

Data shapes

It accepts a single parameter with 2 shapes: object or array.

Object

1
setDynamicParams({
2
    en: {
3
        slug: 'hello-world'
4
    },
5
    fr: {
6
        slug: 'bonjour-le-monde'
7
    }
8
})

Array

More convenient when working with data programmatically

1
setDynamicParams([
2
    {
3
        locale: "en",
4
        params: {
5
            slug: "hello-world"
6
        }
7
    },
8
    {
9
        locale: "fr",
10
        params: {
11
            slug: "bonjour-le-monde"
12
        }
13
    }
14
])