Creating LanguageSelector by using the localizePath function

[Marionetko]

Hello there!
I'm building a site using Astro and I have the language selector built into the header component and has the following structure:

<div>
    <a href="/">
        English
    </a>
</div>
<div>
    <a href="/sp">
        Spanish
    </a>
</div>
<div>
    <a href="/fr">
        French
    </a>
</div>

And of course, when the user is on the other pages of the site he is redirected to the home page but with the selected language.

So, I have a question: is there any way for the user to not be redirected to the home page when selecting a language, but to change only the current page url?

[yassinedoghri]

Hey @Marionetko, you can use the localizePath function to render the links dynamically.

Also, astro-i18next already comes with a LanguageSelector component, you may use it as an example to create your own.

Hope it helps!

[Marionetko]

Oh friend, I'm sorry. I didn't explain it well at first. The thing is, the LanguageSelector is rendered with a <select> tag, but I can't use it. I have a language selector already prepared, but it's implemented with a <a> tag like in my first comment. I am not allowed to use <select> as language selector based on my project rules. So I am trying to figure out how to give LanguageSelector property to my links.

[yassinedoghri]

No problem, you don't have to use the LanguageSelector, you can create your own by using the localizePath function to render the right route.

Here's a basic dynamic example to render language selection using anchor tags:

---
import i18next from "i18next";
import { localizePath } from "astro-i18next";
import ISO6991 from "iso-639-1";

const supportedLanguages = i18next.languages;
const currentLanguage = i18next.language;
const { pathname } = Astro.url;
---

<div>
  {
    supportedLanguages.map((supportedLanguage: string) => {
      const route = localizePath(pathname, supportedLanguage);
      const nativeName = ISO6991.getNativeName(supportedLanguage);
      return (
        <a href={route}>{nativeName}</a>
      );
    })
  }
</div>

Hope it helps!

[Marionetko]

Oh mate, thank you!
It works in my case.

May the force be with you!