しがないエンジニア頑張る

弱々だけどこの界隈でなんとか食らいついていきたい人

react-i18nextで文中の文字を動的にリンクさせる

文章の中で特定の文字を動的にリンクを変えたかった。
以下のような感じで対応できた。

対応例

ja/translation.json

{
  "link" : "こちらの<link_label>リンク</link_label>を参照ください。"
}

en/translation.json

{
  "link" : "Please refer to this <link_label>link</link_label>.”
}
const {t} = useTranslation("translation")
<p>
  <Trans
    t={t}
    i18nKey={"link"}
    components={{
      link_label: (
        <a
          href={
            router.locale === "ja" ? "https://ja.link" : "https://en.link"
          }
        />
      )
    }}
   />
</p>