Svelte i18n reset language on page change

Question

I have a Svelte app using svelte-i18n and svelte-router-spa

I loaded my local in app.svelte like this

  register('en', () => import('./i18n/en.json'));
  register('fr', () => import('./i18n/fr.json'));
  register('it', () => import('./i18n/it.json'));

  init({
    fallbackLocale: 'en',
    initialLocale: 'en',
    
  })?.catch((e: Error) => console.error(e));

Then I use a picker to select a local that do

  function setLanguage(lg?: Language) {
    locale.set(lg || Language.ENGLISH);
  }

Now, with this, the language change correctly, but when I navigate to a new route using for exemple

<a
  href={link}
  aria-label={$_('i18n.Button.MoreAbout', { default: 'More About', values: { subject } })}
>
  // ...
</a>

The local is always reset to English even I had change it.

Is it a default behavior and I need to reset the language on each page change?

Answer 1

It is up to you if and how you store language settings. Eg the setting could be stored in sessionStorage or localStorage on the client or a session object or database on the server.