标签: react-i18next

我的 React 应用程序通过在 package.json 中设置变量从相对路径加载homepage。然而 i18next-http-backend 仍然尝试从 加载翻译http://localhost:3000/locales/en/translation.json而不是http://localhost:3000/myapp/locales/en/translation.json. 我什至尝试设置 loadPath 选项（虽然不确定语法），但这不起作用。请看下面：

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json`,

    interpolation: {
      escapeValue: false // not needed for react as it escapes by default
    }
  })

我怎样才能做到这一点？

我搜索了很多帖子，但都没有解决我的构建问题。

我有两个主要问题

1. 构建后不包含 /public/locale/xx/xxx.json 文件路径
2. css 中使用的背景图片路径无法正常工作

结构如下所示：

my-app
  public
    images
      image.jpg
    locale
      xx
        xxx.json
  src

和背景图片网址一样url(/images/image.jpg)，

该 url 在开发人员上运行良好，但在生产/构建后，它是相对于/路径的，无论homepage设置如何package.json

语言环境文件也是如此。

PS：homepage不会/，假设会/myapp/

我的 i18n 文件是这样的：

i18n
  use(Backend)

我试图将后端设置设置为任何内容 ( __dirname | env.PUBLIC_URL,...etc)，但没有任何效果。

这似乎是一个非常普遍的问题，因为我到处都发现了很多关于它的帖子，但是，在运行时如何正确设置相对路径并没有明确的答案 npm run build

如果您有知识，请为傻瓜式答案提供分步指南。

从这篇文章中我读到您可以添加后处理函数i18next：

i18n.addPostProcessor("myProcessorsName", function(value, key, options) 
{
   return 'some post processed data based on translated value';
});

并在初始化时添加：

i18n.init({ postProcess: 'myProcessorsName' });

但我得到一个错误addPostProcessor不是一个函数。

那么如何添加和使用后处理功能呢i18next？

我知道 react-i18next 在每个组件中都可以工作：函数式（使用 useTranslation）和类组件（使用 withTranslation()）但是我不能在这样的基本函数中使用翻译：

const not_a_component = () => {
  const { t } = useTranslation();
  return t('translation')
};

const translate = not_a_component();

错误钩子！

谢谢 ！

上下文：react-i18next我正在使用ReactJS 模块制作一个多语言页面。

问题：我无法访问排列的 JSON 内容。

翻译的内容存储在每种语言的单独 JSON 文件中，非数组内容工作正常并正确显示和翻译，但是，我似乎无法在 React 组件上使用数组内容，更不用说通过console.log().

以下是我的文件的示例translationEN.json：

{
  "name": "Test",
  "occupations":["occupation1",
  "Part-time occupation2",
  "Language enthusiast"]
}

我可以name使用 来引用非数组i18n.t("name")。但是，尝试访问我的 arrayed occupationsusingi18n.t("occupations")结果会出现在以下 console.log 中：

key 'occupations (en)' returned an object instead of string.

使用JSON.stringify()并不能解决问题，也不能console.log(i18n.t("occupations"), { returnObjects: true })按照i18next 文档中的建议解决问题

提前致谢！

我在这里关注了这篇文章：https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb。

现在我想知道是否有办法将参数传递到从 .json 文件中提取的字符串中。

公共/locales/en/translation.json

{
  "GREETING": "Hello ${name}, nice to see you."
}

src/i18n.ts

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18n
  // i18next-http-backend
  // loads translations from your server
  // https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: false,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false …

我有很多这样的功能：

export function dialogContent() {
    const { t, i18n } = this.props;

    switch (this.state.dialogHandlerVariable) {
        //Delete changeLog
        case 0:
            return (<div> {t("dialog.dashboard.changelog.deleteChangelog.body")}</div>);
    }
}

但是这里我有一个错误。-> t不是函数..

因为这是缺少的：

export default compose(
    translate('translations'),
    connect()
)(LanguageChooser);

我怎样才能将translate（'translations'）部分添加到函数中？

谢谢

我在根据路径检测语言时遇到问题，即http://localhost:3000/en或http://localhost:3000/en/subpage应该将我的页面翻译成英文。我可以通过单击按钮并调用 i18n.changeLanguage('en') 来翻译它，但检测器似乎不起作用。

import i18n from "i18next";
import { reactI18nextModule } from "react-i18next";
import LngDetector from "i18next-browser-languagedetector";
import backend from "i18next-xhr-backend";


const detectionOptions = {
    order: ['path', 'cookie', 'navigator', 'localStorage', 'subdomain', 'queryString', 'htmlTag'],
    lookupFromPathIndex: 0

}


i18n
    .use(LngDetector)
    .use(backend)
    .use(reactI18nextModule) // passes i18n down to react-i18next
    .init({
        ns: ['translation', 'main'],
        defaultNS: 'translation',
        lng: "pl",
        fallbackLng: 'pl',
        detection: detectionOptions,
        keySeparator: false, // we do not use keys in form messages.welcome

        interpolation: {
            escapeValue: false // react already …

我正在使用react-i18next依赖项，但在将其与 next.js 一起使用时遇到问题

在我的_app.js我有：

if (!isServer) {
    init_i18n();
}

function MyApp({ Component, pageProps }) {
    // this if statement is causing a problem!
    if (i18n.isInitialized) {
        return <Component {...pageProps} />;
    } else {
        return <></>;
    }
}

当我_app.js没有 if 语句时：

if (!isServer) {
    init_i18n();
}

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
}

它给我带来了其他水合作用错误：Warning: Text content did not match. Server: "navbar.dashboard" Client: "Dashboard"

非常感谢帮助！