如何在 Remix Run 框架上使用 i18Next 并在 URL 中使用区域设置（如 es/home）

Question

我正在尝试使用 i18Next 库在我的 Remix Run 应用程序中实现国际化 (i18n)。我希望在 URL 中指定区域设置，例如西班牙语版本主页的“es/home”。我有以下代码：

import i18n from "i18next";
import { useTranslation } from "react-i18next";
import Backend from "i18next-fs-backend";
import { initReactI18next } from "react-i18next";
import { useCallback } from "react";

export function useTranslationHelper(ns: string = "langs") {
  const { t, i18n } = useTranslation(ns);

  const translate = useCallback(
    (key: string) => {
      const fullKey = `${key}.${i18n.language}`;
      const translation = t(fullKey);
      // if translation includes .${i18n.language}, just return the key
      if (translation.includes(`.${i18n.language}`)) {
        return key;
      }
      return translation;
    },
    [t, i18n.language]
  );

  return translate;
}

但是，我在设置 i18Next 以与 Remix Run 框架配合使用以及在 URL 中包含区域设置时遇到困难。我已经安装了必要的依赖项，包括“i18next”、“react-i18next”和“i18next-fs-backend”。

有人可以指导我如何在 Remix Run 中正确配置 i18Next 以支持具有区域设置的所需 URL 结构吗？

提前感谢您的帮助！

在我的 Remix Run 应用程序中，我尝试配置 i18Next 进行国际化。我按照文档安装了所需的依赖项，包括“i18next”、“react-i18next”和“i18next-fs-backend”。然后我实现了 useTranslationHelper 函数，如代码片段所示。

我的期望是，当我使用“es/home”之类的 URL 访问应用程序时，i18Next 库会自动检测“es”语言环境并加载该语言的适当翻译。我期望 t(fullKey) 函数返回所提供密钥的翻译字符串。

Answer 1

我建议看看https://github.com/sergiodxa/remix-i18next。