title: External scripts stop working with <Link> in ReactJS
body: <p>I am having some issues with an external script when using <code>&lt;Link to="/"&gt;</code>.</p>
  
  <p>The script is loaded into the main layout <code>index.js</code> as</p>
  
  <pre><code>componentDidMount () {
    const tripadvisorLeft = document.createElement("script");
    tripadvisorLeft.src = "https://www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=789&amp;locationId=10467767&amp;lang=en_NZ&amp;rating=true&amp;nreviews=0&amp;writereviewlink=true&amp;popIdx=true&amp;iswide=true&amp;border=false&amp;display_version=2";
    tripadvisorLeft.async = true;
    document.body.appendChild(tripadvisorLeft);
  }
  </code></pre>
  
  <p>and then used within a <code>component</code> as <strong>JSX</strong></p>
  
  <pre><code>&lt;div id="TA_selfserveprop789" className="TA_selfserveprop"&gt;
     &lt;ul id="3LacWzULQY9" className="TA_links 2JjshLk6wRNW"&gt;
        &lt;li id="odY7zRWG5" className="QzealNl"&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works fine when the browser is reloaded or URL is linked to is a normal <code>&lt;a href</code> anchor. Yet, when using <code>&lt;Link&gt;</code> the script is present in the page source but doesn't load the data.</p>
  
  <p>I kept the script loading from within <code>index.js</code> as when linking to the page I found the script was being added to the page source multiple times. It also doesn't appear to change the issue and performance is the same either way.</p>
  
  <p><a href="https://i.stack.imgur.com/5GA0s.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5GA0s.gif" alt="example"></a></p>