Page Comparison

...

1. HTML values are kept out of the locale files

   • HTML values within translation key text can decrease readability.

2. Hard coded text is not used outside the locale files

   • Using hard coded text within the <Trans> component, means the text has to be maintained in two places. Therefore, we should avoid using hard coded text outside the locale JSON files for easy maintenance.

3. Links used in the home page are kept inside the homeConfig.ts file

   • This is for easy alteration, if links happen to change

...

Adding a link with the <Trans> component

Our plain sentence in our JSON file, without any markup:

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> In the file where we want to render our sentence., we will first add the <Trans>

<Trans>

We will then state the i18nKey as a prop, this . This is the key we associate with our sentence in the JSON file.

...

Our sentence will now be rendered, but without any link yet.

To render the sentence with a link, the components prop is usedadded.

<Trans i18nKey="hello_msg" components={{linkToGoogle: <a href="https://www.google.com/"/>}} />

Now back in our JSON file, we edit our key where we want our link to be.

hello_msg: "Hello <linkToGoogle>amazing<linkToGoogle/> world"

...

Adding a link without the <Trans> component

A link can be added to a whole sentence without the <Trans> component.

...