Reagieren Router globalen Header

Question

Ich habe gerade angefangen React zu lernen, ich versuche, einen SPA-Blog zu machen, der eine global positionierte feste Kopfzeile hat.

Also, jede Route hat die gleiche Kopfzeile und von meinem eckigen Hintergrund würde ich Header außerhalb von ui-view verwenden.

Es ist eine gute Praxis, die Header-Komponente in jeder einzelnen Seitenkomponente zu importieren, oder kann ich die Header-Komponente auf meinem <Router><myHeader/><otherRoutes/></Router> hinzufügen?

Update:

Ich dachte, so etwas zu verwenden:

Routen Komponente, wo ich meine Routen zu definieren:

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 auf der Haupt Index.js Datei-I möchte etwas so darstellen 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!

Answer 1

Aus meiner Erfahrung kann es gut sein, eine Layout-Komponente für Ihre Seite zu definieren, so etwas wie ...

Layoutkomponenten

render() { 
    return(
     <div> 
      <Header /> 
      { this.props.children } 
      /* anything else you want to appear on every page that uses this layout */ 
      <Footer /> 
     </div> 
    ); 
} 

Sie dann Import-Layout in jedem Ihrer Seite Komponenten ..

.

Kontakt Seite Component

render() { 
    return (
     <Layout> 
      <ContactComponent /> 
      /* put all you want on this page within the layout component */ 
     </Layout> 
    ); 
} 

Und yo Sie können Ihr Routing auf die gleiche Weise verlassen, Ihre Route wird die Kontaktseite rendern und die Header wird dann gerendert.

Auf diese Weise erhalten Sie die Kontrolle von sich wiederholenden Sachen, die auf mehreren Seiten sein werden, wenn Sie ein oder zwei leicht verschiedene Seiten benötigen, können Sie einfach ein anderes Layout erstellen und verwenden.