问题标签 [react-i18next]

我正在开发一个我想在其中使用 i18next 的 React 应用程序。为此，我在我的应用程序中添加了i18next和react-i18next，一切似乎都像魅力一样工作。

我的应用程序使用BrowserRouterfrom react-router在各种视图之间切换。当我在http://localhost:3000加载根 URL 时，一切都像魅力一样运行。我可以切换页面，然后翻译没有任何问题。将BrowserRouterURL 更改推送到浏览器历史记录，以便用户可以使用浏览器中的后退和前进按钮进行导航。这意味着一旦用户单击应用程序中的菜单项之一，URL 就会发生变化，即从http://localhost:3000变为http://localhost:3000/suppliers。

但是，如果我在进行此类更改后点击刷新，则会出现问题：控制台显示i18next::translator: missingKey undefined translation并且视图未翻译。当添加从根 URL 到默认页面的重定向时，会显示相同的行为。奇怪的是，整个应用程序的根 UI（标题栏、侧边栏）都被翻译了，它只是由 react-router 管理的页面的一部分（嵌套在相关的每个组件<Route>）显示未翻译。这也只是浏览器加载的事实，因此在整个页面刷新或初始导航到页面之后。如果我在加载后在我的应用程序中导航，即使导航到同一个视图，也会显示翻译后的视图。

我将<App>-component 中的所有内容都包含在<Suspense>-block 中，包括<BrowserRouter>，但问题仍然存在。我的 JSX 结构有点像这样：

我正在使用一个非常简单的配置：

我在 GitHub ( https://github.com/i18next/react-i18next/issues/322 ) 上发现了一个较旧的问题，没有明确的解决方案，并且是较旧版本的 react-i18next。我不完全确定如何将 react-router 与 react-i18next 集成以防止这种行为。

编辑另一个奇怪的事情是，i18n.changeLanguage除了嵌套在...中的组件之外，对每个视图的调用都会传播到<Route>...我认为它可能是相关的，但我仍然无法找到解决方案...

我正在将react-i18next库添加到我们的项目中，现在它运行良好（而且它是一个非常棒的工具）、不同的文件、命名空间等等......但我想知道是否有任何方法可以避免这段代码：

如果我已经用withTranslation(['namespace1', 'namespace2'])函数加载了命名空间。由于两个命名空间都已加载，t 函数是否可以在它们中查找文本，或者如果命名空间不是默认命名空间或参数中的第一个命名空间，我是否总是需要指定命名空间withTranslation。

我正在尝试使用 react-i18next 让 I18N 工作。我正在尽可能接近此处提供的步骤。我已经尝试了几个小时，进行了大量的谷歌搜索，但还没有发现我做错了什么。任何帮助表示赞赏。

我收到此错误堆栈跟踪：

我在最顶层有一个带有后备的悬念：

我没有使用钩子，而是建议将 HOC 与 App 类上的类一起使用，如下所示：

以前我正在使用react-intl并且能够为将替换为组件的项目设置占位符，例如{br}使用<br />.

我目前在使用react-i18next和i18next-icu尝试执行操作时遇到错误：

实际上可以使用i18next/来做到这一点i18next-icu吗？如果不是，将组件插入已翻译字符串的另一种方法是什么？

我可以通过i18n.addResources(['en', en, namespace]).

我本能地在componentDidMount方法中这样做了，这通常是此类操作的首选方法，并创建了一个小型实用程序组件来加载我的翻译文件。

但是，通过这样做，我在加载翻译之前等待初始渲染。这会触发i18next::translator: missingKey fr HomeRecord titleFieldLabel titleFieldLabel控制台中的消息，因为使用的子<NamespacesConsumer />级在加载翻译之前也会经历初始渲染。

我找到了三种防止这种行为的方法：

• 使用contructor而不是componentDidMount加载翻译。这将阻止初始渲染，但确保所有翻译在发生时都可用。
• 传递wait={true}给 each <NamespacesConsumer />，这不会阻塞整个屏幕的初始渲染，但需要开发人员记住将 prop 传递给每个组件，因为它默认为 false。
• 覆盖之defaultProps类的<NamespacesConsumer />：

这个问题的首选解决方案是什么？在我看来，使用构造函数不是推荐的做法，但通过要求他们指定来给所有开发人员增加负担wait={true}似乎更容易出错。

I have been able to integrate react-i18next into my project, however, when I change the language in Chrome and refresh the application, it does not change the text. It stays as the previous translation. I noticed that in the terminal where I log data, the translations.json files are loaded for the correct language set in the browser. Video demo showing what happens.

From a post I made on the github page for react-i18next, the creator indicated that what I might be missing was passing down initial translations and language so client continues where the server stopped.

I will appreciate if I can get some pointers on how to figure this out.

I have recreated a sample project here.

Cheers

我正在使用 React-Native 构建一个多语言应用程序，我对选择国际化库有点困惑，混淆在两个库之间一个是 React-intel，另一个是 React-i18next 我与多个开发人员讨论过这个问题，答案是几乎 50/50 这就是我问这个问题的原因，任何人都可以建议我在两个图书馆之间有一个更好的理由，谢谢。

我正在使用 React-i18next 库，我需要在函数t()内部获取翻译函数。

使用useTranslation()时失败并出现错误

Hooks 只能在函数组件的主体内部调用。

我尝试在初始化中使用I18nextProviderand ，但是两种设置都会产生相同的错误。.use(initReactI18next)

我是否以错误的方式使用它，或者我误解了什么？

编辑： 我发现，只有将呈现为组件的函数才能使用 useTranslation。像

我想使用 react-18next 支持本地化。该组件显示一个Picker，设置一个 LocalStorage 键（所选语言）并更改应用程序语言。我注意到该onValueChange方法被调用了两次。第一次调用（在 Picker 项目上使用正确的选择点击操作）具有正确的参数（我选择的语言），第二次调用具有第一个 Picker 项目的值，只要值为 (!)。

示例：如果我选择EnglishPicker 项目，我看到 Picker 切换到英语（第一次_changeLanguage()调用），然后再次切换到“设备”（第二次_changeLanguage()调用）。我确定这是一个异步操作问题，不知道在哪里..

该代码基于 react-i18next Expo 示例 https://github.com/i18next/react-i18next/tree/master/example/v9.xx/reactnative-expo

我有以下 PHP 脚本来加载 i18next 翻译的资源

但是如何将它与我的 react js 应用程序一起使用？最初，我使用客户端中的 json 加载翻译，就像在 i18next 官方教程中所做的那样。

我想在服务器端使用 PHP 加载。但以下方法不起作用：

我应该在我的 React 脚本中更改什么？谢谢你。