title: Replace <a> with React <Link> in text
body: <p>in my React app I am getting some HTML from another server (Wikipedia) and - in this text - want to replace all the  links with react-router  links.</p>
  
  <p>What I have come up with is the following code:</p>
  
  <pre><code>// Parse HTML with JavaScript DOM Parser
  let parser = new DOMParser();
  let el = parser.parseFromString('&lt;div&gt;' + html + '&lt;/div&gt;', 'text/html');
  
  // Replace links with react-router links
  el.querySelectorAll('a').forEach(a =&gt; {
    let to = a.getAttribute('href');
    let text = a.innerText;
    let link = &lt;Link to={to}&gt;{text}&lt;/Link&gt;;
    a.replaceWith(link);
  });
  this.setState({
    html: el.innerHTML
  })
  </code></pre>
  
  <p>Then later in <code>render()</code> I then inserted it into the page using</p>
  
  <pre><code>&lt;div dangerouslySetInnerHTML={{__html: this.state.html}} /&gt;
  </code></pre>
  
  <p>The problem is that React JSX is not a native JavaScript element thus not working with <code>replaceWith</code>. I also assume that such a <code>Link</code> object can not be stored as text and then later be restored using <code>dangerouslySetInnerHTML</code>.</p>
  
  <p>So: what is the best way to do this method? I want to keep all the various elements around the link so I cannot simply loop through the  links in <code>render()</code></p>