当我使用 i18next 处理翻译时，如何在 React/Gatsby 应用程序中添加路由？

Question

so recently I have been implementing an internationalization feature in my Gatsby app, but it should be similar to a React app, so if you know React, please tell me your experience too, thanks!

To enable the translation feature, I use react-i18next . My file structure looks like this:

-src
  -locale
   -en
     -translation.js
   -zh
     -translation.js
  -pages
   -index.js
   -......js

So what is going on is that, I extract all the text on files in pages folder and put them in translation.js in different language folders, and when I click a button to change the language, all the files in pages will find the corresponding text from different language translation.js file accordingly.

But the route doesn't change at all. Is there a way for me to be able to do this: when I change the language, my route will change from /en/index to /zh/index ?

I know that I can make different pages, but I don't want to do that, I want to keep my current handling to separate my text from the app. Is there a package that I can use or what do you use to handle this? Thank you!

Answer 1

Changing the language itself will not change the route. You will need to use the gatsby router to do that (via: await navigate('/:lang/path/slug') ). Butt like @jMadelaine said, you shouldn't need to change the route as it supports multi-language url routes in a single page component.

However, if you wish to do so can do the following below:

You can use the i18next-browser-languagedetector plugin and will need to include path or querystring in the detection.order array to be initialized in the i18next config for language detection. https://github.com/i18next/i18next-browser-languageDetector#detector-options

Then when initializing the i18next client you can use the language detector like this for example:

import i18next from "i18next"
import LanguageDetector from "i18next-browser-languagedetector"

const detection = {
  // order and from where user language should be detected
  order: [
    "querystring",
    "cookie",
    "localStorage",
    "navigator",
    "htmlTag",
    "path",
    "subdomain",
  ],

  // keys or params to lookup language from
  lookupQuerystring: "lng",
  lookupCookie: "i18next",
  lookupLocalStorage: "i18nextLng",
  lookupFromPathIndex: 0,
  lookupFromSubdomainIndex: 0,
  ...
}

i18next.use(LanguageDetector).init({
  detection, // <-- passed in here
  whitelist: ["en", "es"],
  fallbackLng: "en",
  resources: i18nResources,
  ns: ["translations"],
  defaultNS: "translations",
  returnObjects: true,
  debug: process.env.NODE_ENV === "development",
  react: { wait: true },
  keySeparator: false,
  supportedLngs: ["en", "es"],
  lowerCaseLng: true,
})