React router глобальный заголовок

Question

Я только начал изучать React, я пытаюсь создать блог SPA, который имеет глобальный позиционированный фиксированный заголовок.

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

Таким образом, каждый маршрут имеет тот же заголовок, и из моего углового фона я бы использовал заголовок вне ui-view.

Хорошая практика импорта компонента заголовка в каждый отдельный компонент страницы, или я могу добавить компонент заголовка на свой <Router><myHeader/><otherRoutes/></Router>?

Update:

Я думал использовать что-то вроде этого:

Маршруты компонент, где я определяю мои маршруты:

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

А потом на главном index.js файла I хотел бы сделать что-то вроде:

import Routes from './components/Routes'; 

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

Может ли кто-нибудь объяснить мне? Благодаря!

Answer 1

Из моего опыта это может быть хорошо, чтобы определить компонент макета для вашей страницы, что-то вроде ...

Компоновка компонентов

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

Вы затем импортировать макет в каждый из ваших компонентов страницы .. .

Контакт Page Компонентный

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

И лет u может оставить вашу маршрутизацию одинаковой, ваш маршрут отобразит страницу контакта и, в свою очередь, отобразит ваш заголовок.

Таким образом вы получите контроль над повторяющимися материалами, которые будут находиться на нескольких страницах, если вам нужна одна или две несколько разные страницы, вы можете просто создать другой макет и использовать его.