The <Trans> component should be used when you have react/HTML nodes integrated into a sentence.
A few cases where the <Trans> component is needed:
When words nested inside a sentence require…
<link>
<abbr>
<strong>
<i>
Where the <Trans> component is not needed:
A whole word/sentence is wrapped inside a react/HTML node.
How we use it - example of adding a link
Our sentence in our JSON file:
hello_msg: "Hello amazing world."
We are going to add a link on the word ‘amazing’ to www.google.com.
We will first add the <Trans> where we want to render our sentence.
<Trans>
We will then state the i18nKey as a prop, this is the key we associate with our sentence in the JSON file.
<Trans i18nKey="hello_msg" />
Our sentence will now be rendered, but without any link yet.
To render the sentence with a link, the components prop is used.
<Trans i18nKey="hello_msg" components={{linkToGoogle: <a href="https://www.google.com/"/>}} />
Now in our JSON file, we edit our key where we want our link to be.
hello_msg: "Hello <linkToGoogle>amazing<linkToGoogle/> world"
Without the <Trans> component
A link can be added to a whole sentence without the <Trans> component.
<Link href='https://www.google.com/'>{t('hello_msg')}</Link>