title: External link within an internal link - React router
body: <p>I try to set up an external link in a block containing itself an internal link, managed with react-router.
  The problem is that when I click on the external link, I'm not redirected to the external link but to the internal link of the block. </p>
  
  <p>1- Here is my base code, without the link surrounding my item :</p>
  
  <pre><code>&lt;li className="projects__item"&gt;
      &lt;div className="projects__item-logo"&gt;
          &lt;Link to={`projects/${id}`}&gt;
              &lt;img className="projects__item-media" src={Rocket} alt={name} /&gt;
          &lt;/Link&gt;
      &lt;/div&gt;
      &lt;div className="projects__item-entry"&gt;
          &lt;h3 className="projects__item-title"&gt;
              &lt;Link to={`/projects/${id}`}&gt;
                  {name.substr(name.lastIndexOf('/') + 1)}
              &lt;/Link&gt;
          &lt;/h3&gt;
          &lt;a href="test.com" target="_blank"&gt;
              TEST
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>2- And the code with the link surrounding my li, in order to improve the UX :</p>
  
  <pre><code>&lt;Link to={`projects/${id}`}&gt;
     &lt;li className="projects__item"&gt;
      &lt;div className="projects__item-logo"&gt;
          &lt;Link to={`projects/${id}`}&gt;
              &lt;img className="projects__item-media" src={Rocket} alt={name} /&gt;
          &lt;/Link&gt;
      &lt;/div&gt;
      &lt;div className="projects__item-entry"&gt;
          &lt;h3 className="projects__item-title"&gt;
              &lt;Link to={`/projects/${id}`}&gt;
                  {name.substr(name.lastIndexOf('/') + 1)}
              &lt;/Link&gt;
          &lt;/h3&gt;
          &lt;a href="test.com" target="_blank"&gt;
              TEST
          &lt;/a&gt;
      &lt;/div&gt;
     &lt;/li&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>Does anyone have any ideas, please? </p>