title: React router global header
body: <p>I just started learning React, I'm trying to make a SPA blog, which has a global positioned fixed header.</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  // import other components here
  
      render((
        &lt;Router history={browserHistory}&gt;
          &lt;Route path="/" component={Home} /&gt;
          &lt;Route path="/About" component={About} /&gt;
          &lt;Route path="/Contact" component={Contact} /&gt;
          &lt;Route path="*" component={Error} /&gt;
        &lt;/Router&gt;
      ), document.getElementById('app'));
  </code></pre>
  
  <p>So, each routes has the same header and from my angular background, I would use header outside ui-view.</p>
  
  <p>Its a good practice to import the header component in each individual page component, or can I add the header component on my <code>&lt;Router&gt;&lt;myHeader/&gt;&lt;otherRoutes/&gt;&lt;/Router&gt;</code>?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I was thinking to use something like this:</p>
  
  <p>Routes component, where I define my routes:</p>
  
  <pre><code>class Routes extends React.Component {
      render() {
          return (
              &lt;Router history={browserHistory}&gt;
                  &lt;IndexRoute component={Home} /&gt;
                  &lt;Route path="/studio" component={Studio} /&gt;
                  &lt;Route path="/work" component={Work} /&gt;
                  &lt;Route path="*" component={Home} /&gt;
              &lt;/Router&gt;
          )
      }
  }
  </code></pre>
  
  <p>And then on main Index.js file I would like to render something like:</p>
  
  <pre><code>import Routes from './components/Routes';
  
  render((
     &lt;div&gt;
        &lt;div className="header"&gt;header&lt;/div&gt;
        &lt;Routes /&gt;
     &lt;/div&gt;
  ), document.getElementById('app'));
  </code></pre>
  
  <p>Can someone explain me? Thanks!</p>