Complex Translations Using the Trans Component

In a few cases, it might be necessary to use a React component in the translations. For example, we might want to use the Link component from React Router to link to a different URL within a translation. The t() function does not support this out of the box. The solution to this problem comes in the form of the Trans component from react-18next. It is not always easy to understand how it should be used, but it can be a powerful tool.

Using the Link component inside translations

Let’s assume that we want to use a Link component inside of our translations. The code might resemble this: