reactjs - How can I pass props to layouts used in react-router? -

assume following route setup:

reactdom.render(       <provider store={store}>         <router history={browserhistory}>             <route path="/">                 <route component={layout} onenter={checkindexauthorization(store)}>                     <indexroute component={home} />                     <route path="/home" component={home} />                 </route>                  <route component={authlayout} onenter={checkloginauthorization(store)}>                     <route path="/login" component={login} />                 </route>             </route>         </router>     </provider>,     document.getelementbyid('root'), ) 

as can see, there 2 main layouts, normal layout , login page authlayout. normal layout used app proper.

below, can see layout component file:

//======================================== // imports //========================================  import react, { proptypes } 'react';  //======================================== // component //========================================  const layout = props => (     <main classname="app">         <header>             {props.sectiontitle}         </header>          <section>             {props.children}         </section>          <footer>          </footer>     </main> )  layout.proptypes = {     children: proptypes.node,     sectiontitle: proptypes.string // <-- not being set anywhere }  //======================================== // exports //========================================  export default layout; 

now, layout has title section @ top, needs display text based on in app are.

as i'm new react js, didn't want 'how pass props router' or similar - rather, i'm interested in correct way might be. 'react way', if will. whether involves passing props directly route, or changing global state of kind affect title, or whatever 'correct' way of handling scenario be.

edit: should mention i'm using react js v. 15.6.1, , react-router v. 3.0.5.

if understand correctly trying achieve name of component / page in dynamically.
if case, can add prop called name route , grab inside component.
example:

 <route path="/" name="app" component={app}>   <indexroute name="home page" component={homepage} />   <route path="/home" name="home page" component={homepage} />   <route path="/about" name="about page" component={aboutpage} />   <route path="*" component={notfoundpage} /> </route> 

and inside component how grab name:

render() { // ...     const currentroutename = this.props.routes[this.props.routes.length - 1].name; // ... rest of code