React router global header
<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>