title: react-i18next: interpolation of link in HTML tag in the middle of the text
body: <p>I am using react, <a href="http://i18next.com/" rel="noreferrer">i18next</a> and <a href="https://github.com/i18next/react-i18next" rel="noreferrer">react-i18next</a>. I would like to have some translatable text with HTML link in the middle of the text which is interpolated in react, something like this:  </p>
  
  <pre><code>This is my text with &lt;a href="{{link}}"&gt;a beautiful link&lt;/a&gt; in the middle of the text
  </code></pre>
  
  <p>The solution below works, but the problem is that I need to interpolate the link in react so it can't be hard-coded in label files: </p>
  
  <pre><code>"my-label": "This is my text with &lt;a href=\"http://google.com\"&gt;a beautiful link&lt;/a&gt; in the middle of the text"
  
  [...]
  
  &lt;Interpolate i18nKey="my-label" useDangerouslySetInnerHTML /&gt;
  </code></pre>
  
  <p>It seems like this is much better:</p>
  
  <pre><code>"my-label": "This is my text with {{link}} in the middle of the text",
  "link" "a beautiful link"
  
  [...]
  
  const { url } = props;
  const link = &lt;a href={url}&gt;{t('link')}&lt;/a&gt;
  
  &lt;Interpolate i18nKey="my-label" link={link} /&gt;
  </code></pre>
  
  <p>Could be the solution, however the app is translated into many languages and a quality of translations really matters so I prefer to have the whole text in one line for translators (this is important especially for languages which have cases). </p>
  
  <p>Is there any way how to get working something like this (or is there any way how to solve it completely differently)?</p>
  
  <pre><code>"my-label": "This is my text with &lt;a href=\"{{link}}\"&gt;a beautiful link&lt;/a&gt; in the middle of the text"
  
  [...]
  
  const { url } = props;
  
  &lt;Interpolate i18nKey="my-label" useDangerouslySetInnerHTML link={url} /&gt;
  </code></pre>