Intestazione globale del router di Reazione

Question

Ho appena iniziato a imparare React, sto cercando di creare un blog SPA, che ha un'intestazione fissa posizionata a livello globale.

Quindi, ogni instradamento ha la stessa intestazione e dal mio sfondo angolare, userei l'intestazione all'esterno di ui-view.

È una buona pratica per importare il componente di intestazione in ogni singolo componente di pagina o è possibile aggiungere il componente di intestazione sul mio <Router><myHeader/><otherRoutes/></Router>?

Aggiornamento:

Stavo pensando di usare qualcosa di simile: componente

Routes, dove mi definisco miei percorsi:

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

E poi sulla principale Index.js file vorrebbe rendere qualcosa del tipo:

import Routes from './components/Routes'; 

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

Qualcuno può spiegarmi? Grazie!

Answer 1

Dalla mia esperienza può essere buono per definire un componente di layout per la tua pagina, qualcosa di simile ...

layout dei componenti

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

È quindi layout di importazione in ognuno dei componenti della pagina .. .

Pagina contatto Componente

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

E yo puoi lasciare lo stesso routing, il tuo percorso renderà la pagina dei contatti e a sua volta renderà il tuo header.

In questo modo si ottiene il controllo di cose ripetitive che si troveranno su più pagine, se è necessaria una o due pagine leggermente diverse è sufficiente creare un altro layout e utilizzarlo.