gatsby-theme-i18n/src/components/localized-link.js

A Gatsby theme for providing internationalization support to your Gatsby site by taking in a configuration file and creating prefixed, enriched pages for each language.

import * as React from "react"
import { Link } from "gatsby"
import { localizedPath } from "../helpers"
import { useLocalization } from "../hooks/use-localization"

export const LocalizedLink = ({ to, language, ...props }) => {
  const { defaultLang, prefixDefault, locale } = useLocalization()
  const linkLocale = language || locale

  return (
    <Link
      {...props}
      to={localizedPath({
        defaultLang,
        prefixDefault,
        locale: linkLocale,
        path: to,
      })}
    />
  )
}