标签: react-i18next

我用create-react-app创建了一个React应用程序

我想实现翻译,我发现了react-i18next

安装完所需的软件包后,我设置了我的i18n.js配置文件:

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';

i18n
    .use(XHR)
    .use(LanguageDetector)
    .init({
      debug: true,
      lng: 'en',
      nsSeparator: false,
      keySeparator: false,
      fallbackLng: false,
      backend: {
        loadPath: 'locales/{{lng}}/{{ns}}.json'
      }
    });


export default i18n;

我收到这个错误: i18next::backendConnector: loading namespace translation for language en failed failed parsing locales/en/translation.json to json

这是因为webpack找不到json文件并返回index.html文件内容:

这是我的代码：

import React from 'react';
import { useTranslation } from 'react-i18next';

 function MyComponent() {
  const { t, i18n } = useTranslation();

  return <p>{t('my translated text')}</p>
}


export default MyComponent;

我收到以下错误：Cannot find module 'react-i18next'。

关于如何修复它有什么想法吗？谢谢你！

我正在开发组件来跟踪丢失的翻译，我的目标是使用样式化组件对丢失的翻译进行样式设置，但我无法找到一种方法来检测是否t("someKey")从当前设置的语言返回翻译值或如果它丢失则默认回退。有任何想法吗？文档在这一点上没有帮助。

我无法弄清楚如何将react-i18next 与typescript 4.1 一起使用。

根据文档，我应该能够执行以下操作：

const { t } = useTranslation();
return <h1>{t('title')}</h1>

但是，该调用会t出错：

No overload matches this call: Argument of type 'string' is not assignable to parameter of type 'never'.

有效的是使用：

useTranslation<string>()

或者

useTranslation('translation')

这两个条件似乎都是不必要的。

这似乎只适用于 typescript 4，好像我降级到 typescript 3 错误就会消失。

有没有办法在 TypeScript 4 中使用较短的内容useTranslation()？

错误：未捕获[错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是我在玩笑中运行测试时遇到的错误。正在测试的 React 组件使用<Trans>来自react-i18next. 当我评论那部分代码时，测试正在按预期工作。

我的 React 应用程序使用next-i18nextpackage.json。我想在我的插值中放入一些 React 组件：

import React from 'react';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function Review({ text, author }) {
  const { t } = useTranslation('reviews');

  return (
    <article>
      <p>{text}</p>
      <footer>
        {t('footer', { author: <a href={author.url}>{author.name}</a> })}
      </footer>
    </article>
  );
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['reviews']),
  }
});

和reviews.json：

import React from 'react';
import { useTranslation } …

测试库...总是很有趣。我next-i18next在我的 NextJS 项目中使用。我们正在使用useTranslation带有命名空间的钩子。

当我运行我的测试有一个警告：

console.warn react-i18next:: 您需要使用 initReactI18next 传入一个 i18next 实例

> 33 |   const { t } = useTranslation(['common', 'account']);
     |                 ^

我已经尝试了react-i18next 测试示例中的设置，但没有成功。我也试过这个建议。

以及只是试图嘲笑useTranslation但没有成功。

是否有更直接的解决方案来避免此警告？测试通过 FWIW...

test('feature displays error', async () => {
    const { findByTestId, findByRole } = render(
      <I18nextProvider i18n={i18n}>
        <InviteCollectEmails onSubmit={jest.fn()} />
      </I18nextProvider>,
      {
        query: {
          orgId: 666,
        },
      }
    );

    const submitBtn = await findByRole('button', {
      name: 'account:organization.invite.copyLink',
    });

    fireEvent.click(submitBtn);

    await findByTestId('loader');

    const alert …

下面是我的代码，

我不知道为什么 console.log('are you running?') 没有显示，

我的代码有什么问题吗？

我尝试添加自定义语言检测器..

import i18n, { LanguageDetectorModule } from 'i18next';

import { initReactI18next } from 'react-i18next';
import resources from './i18n_resources.json';
import { isLocalhost } from '@/common/detect_utils';
import { detectLanguage } from '.';

const languageDetector: LanguageDetectorModule = {
  type: 'languageDetector',
  detect: () => {
    console.log('are you running?');
    return 'en';
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

i18n
  .use(initReactI18next)
  .use(languageDetector)
  .init({
    resources,
    lng: 'ko',
    fallbackLng: 'en',
    keySeparator: false,
    debug: isLocalhost,
    interpolation: {
      escapeValue: false, …

i18next v22.0.0为翻译功能提供了完整的类型安全性t('world.greeting')，这非常棒。但由于您可以使用该t()函数从嵌套翻译中检索对象，因此它可能会返回一个对象或字符串。

我总是将结果传递给字符串的翻译键。我主要在必须返回字符串的上下文中使用t()，因此以下代码片段中的函数会产生 TypeScript 错误：

const resources = {
  en: {
    translation: {
      world:  {
        withGreeting: 'Hello World',
        withoutGreeting: 'World',
        someNestedProperty: {
          hello: 'Text',
        }
      },
    },
  },
}

// Declare i18next typings: https://www.i18next.com/overview/typescript
declare module "i18next" {
  interface CustomTypeOptions {
    resources: typeof resources["en"];
  }
}


// (...) initialize i18next

const getText = (enabled: boolean): string => {
   if(enabled) {
     // Typescript Error: string | { hello: string } not assignable to type …

我目前正在开发多语言 Next.js 13 应用程序，并使用 next-intl 包进行国际化。我一直在尝试为我的路线设置翻译后的网址，但遇到了一些问题。

这是我想要实现的目标的一个例子。如果源语言是丹麦语，则路径可以是：mypage/om。
对于英语，它将是：mypage/en/about。

我的项目的结构是利用应用程序目录（/app/[lang]/page.tsx）。

我已按照 next-intl 文档来设置国际化路由，但我很难让 URL 翻译与此设置一起正常工作。

我需要页面能够利用“generateStaticParams”，这样我们就可以使用所有不同的语言构建静态页面，并允许每个 url 特定于语言，但仍然只需为主语言创建 1 个单页面。我希望这是有道理的。

当我导航到 mypage/om 时，应用程序正确解析为丹麦语版本，我还可以在 mypage/en/om 上看到英语版本。但是，我希望能够导航到 mypage/en/about，而不必创建具有不同名称的多个页面。

有没有人有在 Next.js 13 中使用 next-intl 设置翻译 URL 的经验，特别是应用程序目录结构？任何帮助将不胜感激。提前致谢！