如何在 Next-i18next / React i18next 中插入一个 Link 组件来改变文本中的位置

Question

目前我将 Next.js 与 Next-i18next 一起用于 I18N，但我了解 React/i18next 实现基本相同。

我遇到的问题是我需要在一些翻译文本中插入下一个链接组件，但根据语言（英语与德语）的不同，文本和链接的顺序会发生变化。 例如，我正在努力解决的文本是：'Accept data policy' vs 'Datenschutzerklärung akzeptieren'

目前我有一个快速修复方法，方法是在翻译 JSON 文件中为文本和链接创建两个值，然后根据当前语言交换位置。显然，这不是一个可持续的解决方案。我曾尝试使用“Trans”组件，但这显示了一些意外行为，即仅在页面刷新后才开始翻译，否则您会看到 Trans 组件内的文本。

示例：

 function LinkText({ href, children}) {
    return <Link to={href || ''}>{children}</Link>;
  }

  return (
      <Trans i18nKey="sentence">
         text before link
        <LinkText href="/data-policy">{t("dataPolicy")}</LinkText> 
         text after link
      </Trans>
  );

以及相关的 JSON：

{
  "sentence": "agree to our <1><0/></1>",
  "dataPolicy": "data policy"
}

这是我为在 React 中复制问题而制作的 CodeSandbox 的链接：link

（P.S 目前 i18next 的实现似乎并没有有效地替换 Codesandbox 中的语言，但我将其包含在内，因为代码是用于 MWE）

提前感谢您的帮助，这让我发疯了。

Answer 1

你几乎没有遗漏的部分，

1. 您的 i18next 配置缺少获取语言环境文件的方法，我已添加 i18next-http-backend。
2. 您应该使用Trans 组件来注入句子的链接。 您的语言环境 json 应如下所示：

{
  "sentence": "Accept <0>data policy</0>"
}

// TranslatedLink.js

import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { Link } from 'react-router-dom';

function LinkText({ href, children }) {
  return <Link to={href || ''}>{children}</Link>;
}

export default function TranslatedLink() {
  const { t } = useTranslation(['common']);

  return (
    <div style={{ padding: 50 }}>
      <Trans i18nKey="sentence" t={t} components={[<LinkText href="/data-policy" />]} />
    </div>
  );
}

一个工作示例：https://codesandbox.io/s/react-i18n-interpolation-issue-forked-ck8l4