Navegação com React-router (Versão 2)

Author: leonardomleitao

my-money-app/frontend/src/common/template/menu.jsx

@@ -4,9 +4,9 @@ import MenuTree from './menuTree'
 
 export default props => (
     <ul className='sidebar-menu'>
-        <MenuItem path='#' label='Dashboard' icon='dashboard' />
+        <MenuItem path='/' label='Dashboard' icon='dashboard' />
         <MenuTree label='Cadastro' icon='edit'> 
-            <MenuItem path='#billingCycles'
+            <MenuItem path='billingCycles'
                 label='Ciclos de Pagamentos' icon='usd' />
         </MenuTree>
     </ul>

my-money-app/frontend/src/common/template/menuItem.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import { Link } from 'react-router'
 
 export default props => (
     <li> 
-        <a href={props.path}> 
+        <Link to={props.path}>
             <i className={`fa fa-${props.icon}`}></i> <span>{props.label}</span>
-        </a>
+        </Link>
     </li>
 )

my-money-app/frontend/src/index.jsx

@@ -7,14 +7,14 @@ import promise from 'redux-promise'
 import multi from 'redux-multi'
 import thunk from 'redux-thunk'
 
-import App from './main/app'
+import Routes from './main/routes'
 import reducers from './main/reducers'
 
 const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ 
       && window.__REDUX_DEVTOOLS_EXTENSION__()
 const store = applyMiddleware(multi, thunk, promise)(createStore)(reducers, devTools)
 ReactDOM.render(
     <Provider store={store}>
-        <App />
+        <Routes />
     </Provider>
 , document.getElementById('app'))

my-money-app/frontend/src/main/app.jsx

@@ -4,15 +4,14 @@ import React from 'react'
 import Header from '../common/template/header'
 import SideBar from '../common/template/sideBar'
 import Footer from '../common/template/footer'
-import Routes from './routes'
 import Messages from '../common/msg/messages'
 
 export default props => (
     <div className='wrapper'>
         <Header />
         <SideBar />
         <div className='content-wrapper'> 
-            <Routes />
+            {props.children}
         </div>
         <Footer />
         <Messages />

my-money-app/frontend/src/main/routes.jsx

@@ -1,13 +1,16 @@
 import React from 'react'
-import { Router, Route, Redirect, hashHistory } from 'react-router'
+import { Router, Route, IndexRoute, Redirect, hashHistory } from 'react-router'
 
+import App from './app'
 import Dashboard from '../dashboard/dashboard'
 import BillingCycle from '../billingCycle/billingCycle'
 
 export default props => (
     <Router history={hashHistory}>
-        <Route path='/' component={Dashboard} />
-        <Route path='/billingCycles' component={BillingCycle} />
+        <Route path='/' component={App}>
+            <IndexRoute component={Dashboard} />
+            <Route path='billingCycles' component={BillingCycle} />
+        </Route>
         <Redirect from='*' to='/' />
     </Router>
 )