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

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 说的那样，你不需要更改路由，因为它支持单个页面组件中的 multi-language url 路由。

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

您可以使用 i18next-browser-languagedetector 插件，并且需要在 detection.order 数组中包含 path 或 querystring，以便在 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 应用程序中添加路由？

How to add routes in a React/Gatsby app when I use i18next to handle translation?

javascript

internationalization

i18next

reactjs

gatsby