title: react.js - React-router dealing with fixed headers and footers
body: <p>I have React.js app flavored with react-router, I have a doubt regarding my current routes handling.</p>
  
  <p>Design looks as follows, common mobile layout, fixed header and footer, content in the middle: </p>
  
  <p><img src="https://i.stack.imgur.com/8FIqy.png" alt="enter image description here"></p>
  
  <p>In the case they are static I can simply create such structure:</p>
  
  <pre><code>&lt;RatchetHeader /&gt;
  &lt;RatchetFooter /&gt;
  &lt;RouteHandler /&gt;
  </code></pre>
  
  <p>But occasionally they would change from page to page, for example:</p>
  
  <ul>
  <li>title and button texts</li>
  <li>number of buttons</li>
  <li>footer is not present on some pages</li>
  </ul>
  
  <p>Is it better to put them inside view controllers and re-render everytime with <code>RouteHandler</code>?</p>