react-i18next: interpolation of link in HTML tag in the middle of the text

With react-i18next v4.4.0 we introduced a new component Trans:

<Trans i18nKey="optionalKey">See the <Link to="/more">description</Link> below.</Trans>

The json would be: See the <1>description</1> below.

or even more complex:

<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>

The new feature is documented here: https://react.i18next.com/latest/trans-component

This is the common problem of react-intl and react-i18next - both libs have very limited support of inline components and rich-text formatting inside translations (I've already described it here with more details).

If you're still at the beginning of your project, you might want to consider different i18n library - js-lingui (disclaimer: I'm the author). It's the first (and so far the only) library with full support for inline components.

You simply write:

<Trans>See the <Link to="/more">description</Link> below.</Trans>

and your translators will work with message See the <0>description</0> below.

The only price is you need to use extra babel plugin, which makes it possible.