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:

<p>
  <label>
    <input type="checkbox" name="terms" />
    Ich akzeptiere die <Link to="/terms">AGB</Link>
  </label>
</p>

Using the Link component in such a translation would not work. Translations are strings, and would not be able to define that the ...