javascript - React-Router-Redux and React-Bootstrap -

i've been battling 1 while!

i want have 'main app container' has logo, navigation... want use react-bootstrap pretty up.

at moment i'm running problems, project based off davezuko's "react-redux-starter-kit"

i tried putting of bootstrap <navbar> , <linkcontainers> in root container inside provider.

everything shows , looks nice none of links work, , when put regular react-router <link> run same problems.

i figured, well, links work in views called routes, copied of routes after export default (store) => (

babel, eslint , webpack allow compile, when run page none of shows up, , when take react-dev console, these react nodes don't appear.

here's have, root.js:

import react, { proptypes } 'react'; import { provider } 'react-redux'; import { router } 'react-router';  import { indexlink, link } 'react-router';  import navbar 'react-bootstrap/lib/navbar'; import nav 'react-bootstrap/lib/nav'; import navitem 'react-bootstrap/lib/navitem'; import linkcontainer 'react-router-bootstrap/lib/linkcontainer';  export default class root extends react.component {   static proptypes = {     history: proptypes.object.isrequired,     routes: proptypes.element.isrequired,     store: proptypes.object.isrequired   };    content () {     return (       <router history={this.props.history}>         {this.props.routes}       </router>     );   }    devtools () {     if (__debug__) {       if (__debug_new_window__) {         if (!window.devtoolsextension) {           require('../redux/utils/createdevtoolswindow').default(this.props.store);         } else {           window.devtoolsextension.open();         }       } else if (!window.devtoolsextension) {         const devtools = require('containers/devtools').default;         return <devtools />;       }     }   }    render () {     const styles = require('./../containers/root.scss');     return (       <provider store={this.props.store}>         <div>           <div classname={styles.root}>             <link to='login'>login</link>             <navbar fixedtop>               <navbar.header>                 <navbar.brand>                   <indexlink to='/' activestyle={{color: '#33e0ff'}}>                     <div classname={styles.brand}></div>                     <span>hero energy solutions</span>                   </indexlink>                 </navbar.brand>                 <navbar.toggle />               </navbar.header>               <navbar.collapse eventkey={0}>                 <nav navbar>                   <linkcontainer to='/chat'>                     <navitem eventkey={1}>chat</navitem>                   </linkcontainer>                   <linkcontainer to='/widgets'>                     <navitem eventkey={2}>widgets</navitem>                   </linkcontainer>                   <linkcontainer to='/survey'>                     <navitem eventkey={3}>survey</navitem>                   </linkcontainer>                   <linkcontainer to='/about'>                     <navitem eventkey={4}>about us</navitem>                   </linkcontainer>                   <linkcontainer to='/'>                     <navitem eventkey={5}>login</navitem>                   </linkcontainer>                 </nav>               </navbar.collapse>             </navbar>           </div>           {this.content}           {this.devtools}         </div>       </provider>     );   } } 

routes.js:

import react 'react'; import { route, indexroute } 'react-router'; import corelayout 'layouts/corelayout/corelayout'; import homeview 'views/homeview/homeview'; import loginview 'views/loginview/loginview'; import notfoundview 'views/notfoundview/notfoundview'; import restrictedview 'views/restrictedview/restrictedview'; import aboutview 'views/aboutview/aboutview';  import { indexlink, link } 'react-router';  import navbar 'react-bootstrap/lib/navbar'; import nav 'react-bootstrap/lib/nav'; import navitem 'react-bootstrap/lib/navitem'; import linkcontainer 'react-router-bootstrap/lib/linkcontainer';  import {userauthwrapper} 'redux-auth-wrapper'; import {routeractions} 'react-router-redux';  const checkauth = userauthwrapper({   authselector: (state) => state.user, // how user state   redirectaction: routeractions.replace, // redux action dispatch redirect   wrapperdisplayname: 'checkauth', // nice name auth check   failureredirectpath: 'login'  // default anyway meh! }); export default (store) => (     <div>       <route path='/' component={corelayout}>         <indexroute component={homeview} />         <route path='login' component={loginview} />         <route path='home' component={homeview} />         <route path='about' component={aboutview} />         <route path='restricted' component={checkauth(restrictedview)} />       </route>       <route path='*' component={notfoundview}/>     </div> ); 

i'm not sure if of here's screen shot of client side react console. screenshot of react dev console:

sorry everyone! solution extremely simple.

the corelayout view, of stuff supposed go. biggest problem not understanding how react-router works! understand, here's reasoning:

the route / matches requests have / in (which requests). react component, contains other react components! corelayout component returned, content of corelayout corresponding view, i.e. about, home...

edit: need include <div> {this.props.children} </div> in corelayout view want other sub-views rendered (otherwise won't render!).