i18n対応でテキスト中にリンクを埋め込む方法(react-i18nextの場合)

利用規約やプライバシーポリシーの確認を促す文章の場合、利用規約やプライバシーポリシーの部分を該当ページのリンクにしたい時がある。

i18n対応の場合、言語によってリンクにする箇所が異なるのでどうやるのか調べた。

Transコンポーネントを使う

翻訳ファイルに記述したタグをTransコンポーネントのcomponentsプロパティで指定して置換するコンポーネントを設定する。

Trans Component | react-i18next documentation

react.i18next.com

{
  "termsOfService": "<TermsLink>利用規約</TermsLink>に同意する。",
}

{
  "termsOfService": "I accept and agree to <TermsLink>the Terms of Use</TermsLink>.",
}

import { Trans, useTranslation } from 'react-i18next';

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

  return (
    <Trans
      i18nKey={t("termsOfService")}
      components={{
        TermsLink: <Link href="https://hoge.app/terms" target="_blank"></Link>
      }}
    />
  );
}