how would i implement dynamic-routes-loading of components?

[jasan-s]

Sorry about this newbie question but I'm my routes currently looks 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>
  )
}

which i'm using in index.js:

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

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

[grgur]

System.import or require.ensure are the magic APIs that you need to look into. Whatever they require will be automatically split from the core. React router's getComponent does the async request for the files that contain those components.
Take a look at this react router automatic code splitting example and the official webpack 2 migration guide