Routing Issues in React-Redux -

i'm new react-redux ecosystem, learning trying out simple applications. in case i'm trying out how routing works in react-redux application. basically, idea :

1. navigate new page clicking link( react-router component)
2. navigate new page upon successful completion of dispatched async action.

here's code

    import react 'react'     import {link} 'react-router'     import {routeractions} 'react-router-redux'     import {connect} 'react-redux'      class app extends react.component {     render() {     // , have access selected fields of state too!     return (         <div>             <header>                 links:                 {' '}                 <link to="/">home</link>                 {' '}                 <link to="/foo">foo</link>                 {' '}                 <link to="/bar">bar</link>             </header>             <div>                 <button onclick={() => routeractions.push('/foo')}>go /foo</button>             </div>          </div>         )       }     }     export default connect(null, null)(app);    ===================================================================    import react 'react'    import {connect} 'react-redux'    class foo extends react.component {    render() {     return (         <div> <h1>i'm foo</h1> </div>         )       }     }    export default connect(null, null)(foo);   ===================================================================   import react 'react'    import {connect} 'react-redux'    class bar extends react.component {    render() {     return (         <div> <h1>i'm bar</h1> </div>         )       }     }    export default connect(null, null)(bar);    ===================================================================   import react 'react'   import reactdom 'react-dom'   import {provider} 'react-redux'   import {router, route, browserhistory} 'react-router'   import {synchistorywithstore} 'react-router-redux'   import configurestore './store'   import app './components/test/app';   import bar './components/test/bar';   import foo './components/test/foo';   // store integrated routing middleware.   const store = configurestore()   // sync browser history store.   const history = synchistorywithstore(browserhistory, store)   // , use prepared history in router   reactdom.render(   <provider store={store}>     <div>         <router history={history}>             <route path="/" component={app}>                 <route path="/foo" component={foo}/>                 <route path="/bar" component={bar}/>             </route>         </router>      </div>    </provider>,     document.getelementbyid('root')   ===================================================================    import {combinereducers,createstore, applymiddleware} 'redux'   import thunk 'redux-thunk'   import createlogger 'redux-logger'   import userreducer './reducers/reducer-user';   import {routermiddleware,routerreducer} 'react-router-redux'   import {browserhistory} 'react-router'    export default function configurestore() {    // create routing middleware applying history   const browsermiddleware = routermiddleware(browserhistory);   const logger = createlogger();   const reducer = combinereducers({     userstate: userreducer,     routing: routerreducer   })   const store = createstore(reducer,applymiddleware(thunk,browsermiddleware,logger)); return store; 

}

the application builds fine , comes when click on link, not work.
see screen shot of running application
searched around , read various posts not pinpoint root problem.

your code seems correct, there simple thing missing: not rendering "child" of router! :)

you can check out here:

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes#sharing-our-navigation

whenever want render component route (the 1 declared using </route path="application-path" component={mycomponent} />), need specify placed. using react-router, specify using children prop. then, whenever react "sees" prop, render routes (it can nested route too).

so, fix code, app component needs handle this.props.children correctly. that:

class app extends react.component {    /* ... */    render() {        return (            <div>                <header>links go here</header>                {this.props.children}            </div>        )    } } 

now, when hit "/foo" route, this.props.children replaced foo component.

by way, nested routes (those inside ) don't need have "/", since "prepended". way react-router render nested routes.

i think it, luck that! :)