Can't get Auto Redirect to work

[iDVB]

We have dynamic language routes working... and we only have a single page /pages/index.js

When we manually browse to /en-US or /fr-FR it works and is translating. However, I would think that when browsing to / that it should detect that we have our browser settings to 'fr-FR` and redirect us to the language specific route. no?

plugin settings:

{
  resolve: `gatsby-plugin-react-i18next`,
  options: {
    localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
    languages,
    defaultLanguage,
    redirect: true,
    // if you are using Helmet, you must include siteUrl, and make sure you add http:https
    siteUrl: siteMetadata.siteUrl,
    generateDefaultLanguagePage: true,
    // you can pass any i18next options
    i18nextOptions: {
      debug: true,
      saveMissing: false,
      interpolation: {
        escapeValue: false, // not needed for react as it escapes by default
      },
      keySeparator: false,
      nsSeparator: false,
      detection: {
        order: ['navigator', 'browser'],
        caches: ['localStorage'],
      },
    },
  },
},

[m5kr1pka]

+1

[warmshadow]

Hey, @iDVB @m5kr1pka I will try to guess where your problem could be. Looking at the source code for this plugin we can see that on every page navigation, language for redirecting is detected like this: let detected = window.localStorage.getItem(LANGUAGE_KEY) || browserLang({ languages, fallback: fallbackLanguage || language });

Basically if in your local storage there is already gatsby-i18next-language key with some language value it will take priority, no matter what is your browser's language. If this is a case, you can test it by removing that item from local storage, changing the browser's language and then refreshing that root page. Then the plugin should get the language from navigator, set that value to local storage and redirect. And from then on it should get that language on every page because it will retrieve the right value from the storage. Let me know if this helps.

P.S. to me it seems as a pretty weird implementation, because it would make sense to check for browser language first. Because even if you get redirected correctly when first landing on the website, if you then later navigate to the page that isn't translated to that language (unless every one of your page is translated to same set of languages), value in local storage will get set to default language again and from that point when navigating you will always get default language even if you go to the page which is translated to your browser's language. Unless I'm wrong and I'm missing the reason why it's done like this.

Edit: I think I realized why gatsby-i18next-language could be prioritized. It's most probably because when you use changeLanguage function to let the user change the language with language picker for example, that changing of language changes the gatsby-i18next-language value, so a user from that point on gets the language he chose himself instead of what comes from the browser settings.

[m5kr1pka]

The issue is somewhere deeper within, probably related to browser-lang library mentioned in issue #89. As it works, though I found out that it works on domains with www.*** and doesn't without. Kinda problem solved, though should be tested by someone who has more knowledge about the plugin.

The issue for me was: When you enter the site for the first time it always went to "EN" and was ignoring my browser was set to other locale. Later, I was switched domain to www.domain and it started working, figured it is browserLang issue (not sure that it is related).