reactjs - How to pass in children to parent <Route> component -

i'd define following structure on page:

where layout static , contains elements appear on every page, , render page content based on url.

to achieve i've defined approutes, layout, about , notfound , used react-router, v4:

approutes.js

export default class approutes extends react.component {       render ()     {         const supportshistory = 'pushstate' in window.history;         return (         <browserrouter forcerefresh={!supportshistory} history={hashhistory} onupdate={() => window.scrollto(0, 0)}>             <div>                 <route path='/' component={layout}>                     <route path='/about' component={about}/>                     <route path='*' component={pagenotfround}/>                 </route>             </div>         </browserrouter>);     }; }; 

layout.js

class navigationpane extends react.component {     render()     {         return (             <div>                 <navlink to="/">home</navlink>                 <navlink to="/about">about</navlink>             </div>         )     } }  export default class layout extends react.component {     render ()     {         return (         <div classname="app-container">             <header>                 <navigationpane/>             </header>             <div classname="app-content">                 {this.props.children}             </div>         </div>         );     } } 

layout's header rendered, @ / or @ /about page content empty. if change 1 below pagenotfound rendered @ end, no matter path, while rest works expected, namely / renders layout, while /about renders about component.

<browserrouter forcerefresh={!supportshistory} history={hashhistory} onupdate={() => window.scrollto(0, 0)}>                 <div>                     <route path='/' component={layout}/>                     <route path='/about' component={about}/>                     <route path='*' component={pagenotfround}/>                 </div>             </browserrouter> 

i checked in both cases this.props.children in layout undefined.

update tried out few things , figured that

 <layout>      <switch>          <route exact path='/' component={indexpage}/>          <route path='/about' component={about}/>          <route component={pagenotfround}/>       </switch>  </layout> 

will basic scenario , understand why previous code did not work: in react-router v4

<route to='/' component={layout}>        <route path='/about' component={about}/> </route> 

is not valid. structure

<browserrouter>       <div>          <route path='/' component={layout}>          <route path='/about' component={about}/>          <route path='*' component={pagenotfround}/>       </div>  </browserrouter>  

will keep matching routes until rules exhausted, / matched every time , * matched every time.

so use <layout> component wrap , create routes inside , ensure 1 path matched use <switch>.

this not wanted, because if add path /about/:user about component rendered. question still open.