how can I convert my routes and index.js so i use lazy load (newbie question)

[jasan-s]

I have looked at the example but can't seem to get it to work, At the moment my index.js looks like this, I don't have any server side rendering:

import React from 'react'
import ReactDOM from 'react-dom'
import getRoutes from './config/routes'
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import ReduxThunk from 'redux-thunk'
import * as reducers from 'redux/modules'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from 'react-tap-event-plugin'
import { routerReducer, syncHistoryWithStore, routerMiddleware, replace } from 'react-router-redux'
import { browserHistory } from 'react-router'

const historyMiddleware = routerMiddleware(browserHistory)

let reducer = combineReducers({...reducers, routing: routerReducer})
const store = createStore(
  reducer,
  compose(applyMiddleware(ReduxThunk, historyMiddleware),
   window.devToolsExtension ? window.devToolsExtension() : f => f))

const history = syncHistoryWithStore(browserHistory, store)

export function checkAuth () {
  console.log('Route onEnter CheckAuth function Ran')
  if (store.getState().users.isFetching === true) {
    return
  }
  const isAuthed = store.getState().users.isAuthed
  if (isAuthed === true) {
    if (store.getState().routing.locationBeforeTransitions.pathname === '/') {
      store.dispatch(replace('feed'))
      console.log('CheckAuth function changed the path to feed')
    } else {
      console.log('CheckAuth function ran & User is Authed but path is not /')
      return
    }
  } else {
    if (store.getState().routing.locationBeforeTransitions.pathname !== '/') {
      store.dispatch(replace('/'))
      console.log('CheckAuth function changed the path to /')
    }
  }
}

export function errorAuth () {
  if (store.getState().users.isFetching === true) {
    return
  }
  const isAuthed = store.getState().users.isAuthed

  if (isAuthed === true) {
    replace('/feed')
  } else {
    replace('/')
  }
}


const App = () => (
    <MuiThemeProvider>
      <Provider store = {store}>
        {getRoutes(checkAuth, history, errorAuth)}
      </Provider>
    </MuiThemeProvider>
    )

ReactDOM.render(
    <App/>,
  document.getElementById('app')
)

And my routes are declarative like this:

import React from 'react'
import { Router, Route, IndexRoute } from 'react-router'
import { MainContainer, HomeContainer, FeedContainer } from 'containers'
import {Error404} from 'components'

export default function getRoutes (checkAuth, history, errorAuth) {
  return (
      <Router history={history}>
        <Route path='/' component={MainContainer}>
          <IndexRoute component = {HomeContainer} onEnter = {checkAuth}/>
          <Route path='feed' component = {FeedContainer} onEnter = {checkAuth}/>
          <Route path='*' component = {Error404} />
        </Route>
      </Router>
  )
}