title: addEventListener in onclick firing onload
body: <p>I'm currently trying to get a  with an onclick function to fire only when clicked. But I'm noticing after it's clicked and then on page load, the function is firing again.</p>
  <p>Once I click 'Previous', the page goes to '/test1' for a second, then instantly loads '/test'. Am I not using this eventListener correctly?</p>
  <p><strong>Note:</strong> '/test1' and '/test2' are in one react project and '/test' is in another. I cannot use history.push for this scenario.</p>
  <p>Header.js</p>
  <pre><code>&lt;div id=&quot;header-link&quot;&gt;
      &lt;strong id=&quot;header-copy&quot;&gt;&lt;/strong&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Entry.js</p>
  <pre><code>function getLink(currentPage, history) {
      if(currentPage.name === 'test1') {
          document.getElementById(&quot;header-link&quot;).addEventListener(&quot;click&quot;, function(e){
              e.preventDefault();
              window.location.pathname = '/test'
          });
          document.getElementById(&quot;header-copy&quot;).innerHTML = 'Back';
      }
      if (currentPage.name === 'test2') {
          document.getElementById(&quot;header-link&quot;).addEventListener(&quot;click&quot;, function(){ 
          history.push('/test1') 
          });
          document.getElementById(&quot;header-copy&quot;).innerHTML = 'Previous';
      }
  }
  </code></pre>