javascript - How to nest components under a common header -

trying understand basics of react-router , i'm little overwhelmed choices , options. have react + redux app built under general guidelines provided teropa's awesome tutorial.

essentially need common header component across routes; header, users can click button change main component (each view provides different data visualizations). container should link redux store, , let common data flow down whichever main component selected. strikes me super common need, cannot find solid example/tutorial >_<

so far set follows:

// index.jsx --> sets redux store , react-router routes  const routes = <route>   <route path="/" component={appcontainer} />     <indexroute to="/summary" />     <route path="summary" component={summary} />     <route path="users" component={users} />     <route path="devices" component={devices} />  </route>;  reactdom.render(   <provider store={store}>     <router history={hashhistory}>{routes}</router>   </provider>,   document.getelementbyid('app') ); 

---

// app.jsx --> main container component  export const app = react.createclass({   render: function() {     return <div>       <header {...this.props} />       {this.props.children}     </div>;   } });  function mapstatetoprops(state) {   return state; }  export const appcontainer = connect(mapstatetoprops, actioncreators)(app); 

the summary, users, , devices components standard dumb react components populate based upon data flow-downs. @ moment, error received dumb components not have access redux store. however, if link them directly store, render without header.

edit: removed reference deprecated <routehandler />

from documentation:

routehandler gone. router automatically populates this.props.children of components based on active route.

try with

export const app = react.createclass({   render: function() {     return <div>       <header {...this.props} />       { this.props.children }     </div>;   } }); 

you should fix routes appcontainer contain rest of components (and redirect):

const routes = <route component={appcontainer} />   <redirect from="/" to="/summary" />   <route path="summary" component={summary} />   <route path="users"   component={users} />   <route path="devices" component={devices} />  </route>;