Ich habe gerade angefangen, React zu lernen. Ich versuche, ein SPA-Blog zu erstellen, das einen global positionierten festen Header hat.

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'));

So hat jede Route den gleichen Header und von meinem kantigen Hintergrund aus würde ich den Header außerhalb der UI-Ansicht verwenden.

Es empfiehlt sich, die Kopfzeilenkomponente in jede einzelne Seitenkomponente zu importieren, oder kann ich die Kopfzeilenkomponente zu meinem @ hinzufüge<Router><myHeader/><otherRoutes/></Router>?

Aktualisieren

Ich dachte daran, so etwas zu benutzen:

Routes-Komponente, in der ich meine Routen definiere:

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>
        )
    }
}

Und dann in der Datei Index.js möchte ich etwas rendern wie:

import Routes from './components/Routes';

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

Kann mir jemand erklären? Vielen Dank