Proper links in language switcher about gatsby-plugin-intl HOT 4 OPEN

I've just changed it to button. For accessibility and SEO use this https://support.google.com/webmasters/answer/189077. The question then would be how to add all the language links to head somehow nicely.

from gatsby-plugin-intl.

well, then I would suggest using intl object from IntlContextConsumer. like here : https://github.com/wiziple/gatsby-plugin-intl/blob/master/src/link.js .. you always have language and original route to create correct path .. anyway don't forget about adding attribute lang="{language}" to a[href].

from gatsby-plugin-intl.

@sn3h Thanks for the tip, adding alternate links to the header is definitely a good idea. I'd still like to have proper a links and think that should always be the default way to link between pages as a non-JS fallback.

from gatsby-plugin-intl.

@jdahdah when inspecting the source code from the Link.js component, I've noticed that you could basically use the language attribute in order to force the redirection to another language:

import React from 'react'
import { Location } from '@reach/router'
import { Link } from 'gatsby-plugin-intl'

// Provably somewhere else and imported in the `LanguageSwitcher` component
const supportedLanguages = [
	{
		label: `English`,
		languageTag: `en-us`,
	},
	{
		label: `Español`,
		languageTag: `es-es`,
	},
]

const LanguageSwitcher = () => {
	// Create a string to allow a regex replacement for SEO hreflang links: https://support.google.com/webmasters/answer/189077
	const supportedLocaleRegexGroups = supportedLanguages
		.map(language => language.languageTag)
		.join(`|`)

	return supportedLanguages.map(language => {
		return (
			<Location>
				{({ location }) => (
					<Link
						language={language.languageTag}
						to={`${location.pathname.replace(new RegExp(`^/(${supportedLocaleRegexGroups})`), ``)}`}
						key={`href-lang-${language.languageTag}`}
						lang={language.languageTag}
					>
						{language.label}
					</Link>
				)}
			</Location>
		)
	})
}

export default LanguageSwitcher

As you can see I get the location from @reach/router, but I think you can get the idea and reuse it with <IntlContextConsumer>.

The important bit is that you can control which language you want to link to by passing the wanted language in the language prop in the <Link /> component from 'gatsby-plugin-intl'

from gatsby-plugin-intl.