Option to have defaultLanguage redirect to root

[osk]

When I have a defaultLanguage set, I'd like an option to have that redirects all pages for that language to the root, instead of /<lang>. This applies mostly to <Link> and changeLocale()

E.g. I have en and is and is is the default language. If I call changeLocale('is') on /en/about I'd like to go to /about not /is/about.

[angrypie]

@osk you can use changeLocale("") as workaround.

[vlknhslk]

Is there any example for this?

[hoangbaovu]

I'm handle onClick set locale

const handleChangeLocale = language => {
    if(language === 'en') {
      changeLocale("")
    } else {
      changeLocale(language)
    }
  }

<IntlContextConsumer>
  {({ languages, language: currentLocale }) => {
  return (
    languages.map(language => (
      <MenuItem 
        key={language}
        onClick={() => handleChangeLocale(language)}
        selected={ currentLocale === language }
      >
        {currentLocale}
        {intl.formatMessage({ id: LANGUAGE[language].name })}
      </MenuItem>
    ))
  )}
}
</IntlContextConsumer>

[vlknhslk]

This is mine below. How do I adapt yours :( @hoangbaovu ?

import React from "react"
import { Button } from "antd"
import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"

const languageName = {
  en: "English",
  ar: "العربية",
}

const Language = props => {
  return (
    <div style={{ marginTop: `60px` }}>
      <strong style={{ marginRight: `30px` }}>{props.chooselanguage}</strong>
      <IntlContextConsumer>
        {({ languages, language: currentLocale }) =>
          languages.map(language => (
            <Button
              type="link"
              key={language}
              onClick={() => changeLocale(language === "en" ? "/" : language)}
              style={{
                color: currentLocale === language ? `purple` : `gray`,
                cursor: `pointer`,
                height: `40px`,
                padding: `0px 10px`,
                marginRight: `10px`,
              }}
            >
              {languageName[language]}
            </Button>
          ))
        }
      </IntlContextConsumer>
    </div>
  )
}

export default Language

[shanejones]

Just got this working with the following tweaks

import React from "react"
import { Button } from "antd"
import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"

const languageName = {
  en: "English",
  ar: "العربية",
}

// added this block here
const handleChangeLocale = (language) => {
  if (language === "en") {
    changeLocale("");
  } else {
    changeLocale(language);
  }
};

const Language = props => {
  return (
    <div style={{ marginTop: `60px` }}>
      <strong style={{ marginRight: `30px` }}>{props.chooselanguage}</strong>
      <IntlContextConsumer>
        {({ languages, language: currentLocale }) =>
          languages.map(language => (
            <Button
              type="link"
              key={language}
              onClick={() => handleChangeLocale(language)} // edited this line
              style={{
                color: currentLocale === language ? `purple` : `gray`,
                cursor: `pointer`,
                height: `40px`,
                padding: `0px 10px`,
                marginRight: `10px`,
              }}
            >
              {languageName[language]}
            </Button>
          ))
        }
      </IntlContextConsumer>
    </div>
  )
}

export default Language

[theowenyoung]

same needs, I just made a pr for adding ignoredPaths and redirectDefaultLanguageToRoot as an option for intl. Here is explain:

  {
    resolve: `gatsby-plugin-intl`,
    options: {
      // option for use / as defaultLangauge root path. if your defaultLanguage is `ko`, when `redirectDefaultLanguageToRoot` is true, then it will not generate `/ko/xxx` pages, instead of `/xxx`
      redirectDefaultLanguageToRoot: false,
      // paths that you don't want to genereate locale pages, example: ["/dashboard/","/test/**"], string format is from micromatch https://github.com/micromatch/micromatch
      ignoredPaths: [],
    },
  },

[theowenyoung]

I also publish a updated package: https://www.npmjs.com/package/gatsby-plugin-react-intl

[vlknhslk]

I've set the settings redirectDefaultLanguageToRoot: true, but it didn't work. Any idea?

"gatsby-plugin-intl": "^0.3.3",

and also do I need to update the package 1.2.0 what is the difference?

[renepardon]

I use "gatsby-plugin-intl": "^0.3.3", as well and the setting redirectDefaultLanguageToRoot: true changes nothing. The default language should be the "root". Because a redirect for the default language is also bad for SEO.

[aengl]

@vlknhslk @renepardon The redirectDefaultLanguageToRoot was added by @theowenyoung on his fork, it's not part of the official version. You'll have to change to gatsby-plugin-react-intl to make use of it.

Linking the PR here to avoid confusion: https://github.com/wiziple/gatsby-plugin-intl/pull/118

[matissev]

@theowenyoung It's weird, the redirection from "/en" to "/" on your fork doesn't seem to work here. I just get a blank page on all of the routes. Maybe I am missing something.

[theowenyoung]

@matissev Do you have an example repo?

[matissev]

@theowenyoung I tried again today. The root path actually works with my default language, but the "/en" path (which is default) doesn't redirect to "/". But maybe this is the default behavior of the plugin? Or maybe it comes from my gatsby-node.js file.

[theowenyoung]

@matissev Actually, if en is your default language, the plugin will not generate pages with /en/* path.

Why do you have the /en path? I suspected if en is your default language, then only /* will be used.

[matissev]

@theowenyoung Ok I thought that the plugin would redirect "/en" to "/". I don't really need the "/en" path but I just thought that it could redirect for consistency. In any case, it is working as expected. Thanks for the fork btw!