Глобальный заголовок маршрутизатора React

Я только начал изучать 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'));

Итак, каждый маршрут имеет тот же заголовок и из моего фона angular, я бы использовал заголовок вне 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 я хотел бы сделать что-то вроде:

import Routes from './components/Routes';

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

Может кто-нибудь объяснить мне? Спасибо!

Ответ 1

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

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

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

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

Компонент контактной страницы

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

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

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