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

目前我使用 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 的链接：链接

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

在此先感谢您的帮助，这让我发疯了。

回答

{
  "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>
  );
}