Recién comencé a aprender React, estoy tratando de hacer un blog SPA, que tenga un encabezado fijo posicionado globalmente.

import React from 'react';
import { render } from 'react-dom';
// import other components here

    render((
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/About" component={About} />
        <Route path="/Contact" component={Contact} />
        <Route path="*" component={Error} />
      </Router>
    ), document.getElementById('app'));

Entonces, cada ruta tiene el mismo encabezado y desde mi fondo angular, usaría el encabezado fuera de ui-view.

Es una buena práctica importar el componente de encabezado en cada componente de página individual, o puedo agregar el componente de encabezado en mi<Router><myHeader/><otherRoutes/></Router>?

Actualizar:

Estaba pensando en usar algo como esto:

Componente de rutas, donde defino mis rutas:

class Routes extends React.Component {
    render() {
        return (
            <Router history={browserHistory}>
                <IndexRoute component={Home} />
                <Route path="/studio" component={Studio} />
                <Route path="/work" component={Work} />
                <Route path="*" component={Home} />
            </Router>
        )
    }
}

Y luego, en el archivo principal Index.js, me gustaría representar algo como:

import Routes from './components/Routes';

render((
   <div>
      <div className="header">header</div>
      <Routes />
   </div>
), document.getElementById('app'));

Alguien me puede explicar? ¡Gracias!