title: React routing between static and dynamic pages
body: <p>So normally our S3 hosted Web app index.html looks like:</p>
  
  <pre><code> &lt;div class=app&gt;&lt;/div&gt;
  </code></pre>
  
  <p>That also references the JS bundle &amp; which React renders to and that's fine. But some elements of the site are statically generated for speed &amp; SEO and look like:</p>
  
  <pre><code> &lt;!-- dynamically generated content --&gt;
   &lt;div class=app&gt;&lt;/div&gt;
   &lt;!-- statically generated content --&gt;
   &lt;h1&gt;Title&lt;/h1&gt;
   &lt;p&gt;Information, blah blah blah&lt;/p&gt;
   &lt;p&gt;Lots of content&lt;/p&gt;
  </code></pre>
  
  <p>Conventional wisdom might suggest having the static stuff in a ReactJS component and then <code>reactDOM.renderToString()</code>, but I don't want to do it that way since it's rather complex to do it that way since the static component pulls from many several APIs.</p>
  
  <p>So I am struggling to find documentation for what I want. I want to be able to say for certain URLs, that a full page load is necessary (<code>window.location</code>). Similarly, when navigating away from a static page with content, a full page load is needed or the content need to zapped back to <code>&lt;div class=app&gt;</code>.</p>
  
  <p>How do I achieve this with a react router?</p>