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

Question

目前我使用 Next.js 和 Next-i18next for I18N，但我知道 React/i18next 实现基本相同。
我遇到的问题是我需要在一些翻译文本中插入下一个 Link 组件，但根据语言(英语与德语)，文本和链接的顺序会发生变化。
例如，我正在努力处理的文字是:“接受数据政策”与“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

你有几个缺失的部分，

您的 i18next 配置缺少获取语言环境文件的方法，我添加了 i18next-http-backend .

您应该使用 Trans将链接注入(inject)到句子的组件。
您的语言环境 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