gatsby-theme-i18n/src/components/localized-router.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 { Router } from "@reach/router"
import { useLocalization } from "../hooks/use-localization"

export const LocalizedRouter = ({ basePath, children, ...props }) => {
  const { localizedPath, locale, defaultLang, prefixDefault } =
    useLocalization()
  const path = localizedPath({
    defaultLang,
    prefixDefault,
    locale,
    path: basePath,
  })

  return (
    <Router basepath={path} {...props}>
      {children}
    </Router>
  )
}