reactjs - React js do common header -

am new react js, need header common , need change title according route changes. need create header.jsx file , import ? or else how render header (common file) route? routing part looks this.

import react 'react'; import reactdom 'react-dom'; import app './app.jsx'; import home './home.jsx'; import { router, route, link, browserhistory, indexroute  } 'react-router';  reactdom.render((     <router history = {browserhistory}>         <route path = "/home" component = {home} />         <route path = "/" component = {app}>         </route>     </router> )); 

this should work:

header.jsx:

class header extends component {   render() {     return (<div>your header</div>);   } } 

first-page.jsx:

class firstpage extends component {   render() {     return (<div>first page body</div>);   } } 

second-page.jsx

class secondpage extends component {   render() {     return (<div>second page body</div>);   } } 

app.jsx:

import header './header.jsx';  class app extends component {   render() {     return (       <div>         <header />         {this.props.children}       </div>     );   } } 

web-app.jsx:

import app './app.jsx'; import firstpage './first-page.jsx'; import secondpage './second-page.jsx';  reactdom.render(   <router history = {browserhistory}>     <route path = "/" component = {app}>       <route path = "/first" component = {firstpage}>       <route path = "/second" component = {secondpage}>     </route>   </router> );