Pass React Node as i18n Lingui value

Question

I have translated line of text with link. In past it was enough, when text and link was separed and has its own translation, but now copy was changed and in one language I need to place the link in the middle of sentence. I would like to use Lingui marco prop values, but it doesn't seem to work with NextLink (or any React child). Simple text is working and showing in the translated text, but with NextLink I can't get closer then getting [Object object]. Is there a way to do this?

My code looks like this:

{i18n._('key_to_translated_text', 
    { link: `${<NextLink
    href={routerCatalog.terms}
    target='_blank'
    rel='noopener noreferrer'>{t`key_to_link_text`}</NextLink>}`
})}

In translations file for key_to_translated_text:

msgid "key_to_translated_text"
msgstr "By registering, you agree to our {link}"

etc.

Whitch returns "By registering, you agree to our [object Object]" or "Du stimmst zu unseren [object Object] zu, wenn du dich registrierst."

Answer 1

<Trans>By registering, you agree to our <NextLink
    href={routerCatalog.terms}
    target='_blank'
    rel='noopener noreferrer'>terms</NextLink></Trans>

You will get in catalog:

msgid "By registering, you agree to our <0>terms</0>"
msgstr ""

Now you can translate however you want and move link in the message and change inner text as you wish:

you agree to our <0>terms and conditions</0>, when register

Also avoid manual ids as much as possible. This is not scalable and you have "naming things" problem multiplied to amount of messages you have.