Question

所以最近我已经在我的Gatsby应用程序中实现了国际化功能，但是它应该类似于React应用程序，因此，如果您了解React，也请告诉我您的经验，谢谢！

要启用翻译功能，我使用react-i18next。我的文件结构如下：

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

这是怎么回事，我提取了pages文件夹中文件上的所有文本，并将它们放在不同语言文件夹中的translation.js中，当我单击按钮以更改语言时， pages中的所有文件都会从不同语言的translation.js文件中找到相应的文本。

但是路线完全没有改变。我有办法做到这一点：当我更改语言时，我的路线将从/en/index更改为/zh/index？

我知道我可以创建不同的页面，但是我不想这样做，我想保持当前的处理方式以将文本与应用程序分开。有没有我可以使用的包裹，或者您用什么来处理呢？谢谢！

Answer 1

更改语言本身不会更改路线。您将需要使用gatsby路由器执行此操作（通过await navigate('/:lang/path/slug')）。像@jMadelaine所说的对接，您无需更改路由，因为它在单个页面组件中支持多语言url路由。

但是，如果您愿意，可以执行以下操作：

您可以使用i18next-browser-languagedetector插件，并且需要在path数组中包含querystring或detection.order才能在i18next配置中初始化以进行语言检测。 https://github.com/i18next/i18next-browser-languageDetector#detector-options

然后，在初始化i18next客户端时，您可以使用如下所示的语言检测器：

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,
})

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

1 个答案: