index.js

// Polyfills
import 'promise-polyfill';
import 'whatwg-fetch';

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Redirect, Router, Route, IndexRoute, browserHistory } from 'react-router';

import configureStore from './store/configureStore';
import { routes } from './routes';

// import global css styles
import '../styles/index.css';

import App from 'components/global/App';

const store = configureStore();

// Hash with app routes
const appRoutes = Object.keys(routes.app).map(route => routes.app[route]);

render(
  <Provider store={ store }>
    <Router
      history={ browserHistory }
      onUpdate={ () => window.scrollTo(0, 0) }>
      <Route { ...routes.styleguide } />
      <Route component={ App } path='/'>
        <IndexRoute { ...routes.news } />
        { appRoutes.map((route, key) => <Route key={ key } { ...route } />) }
        <Redirect from='*' to='/404' />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
);

package.json

{
  "devDependencies": {
    "extract-text-webpack-plugin": "^2.0.0-beta",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0-rc",
    "webpack-merge": "^0.17.0",
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0",
  }
}

routes.js

/**
 * Application routes.
 *
 * Note that every `views` entry has to reimplement `getComponent()`. This is due
 * to a crazy context error of this specific version of React Router. Ideally they
 * would share the same implementation (something like `asyncRoute(url)`, etc).
 *
 * Every route is loaded asynchronously only when requested by the user.
 */

const asyncRouteFail = error => console.log('Unable to asynchronously load module', error);

// Route views
const views = {
  article: {
    getComponent(_, cb) {
      import('components/Article').then(module => cb(null, module.default), asyncRouteFail);
    },
  },

  foodMenu: {
    getComponent(_, cb) {
      import('components/FoodMenu').then(module => cb(null, module.default), asyncRouteFail);
    },
  },

  foodMenus: {
    getComponent(_, cb) {
      import('components/FoodMenus').then(module => cb(null, module.default), asyncRouteFail);
    },
  },
  
  search: {
    getComponent(_, cb) {
      import('components/SearchResults').then(module => cb(null, module.default), asyncRouteFail);
    },
  },

  feedback: {
    getComponent(_, cb) {
      import('components/Feedback').then(module => cb(null, module.default), asyncRouteFail);
    },
  },

  profile: {
    getComponent(_, cb) {
      import('components/Profile').then(module => cb(null, module.default), asyncRouteFail);
    },
  },

  settings: {
    getComponent(_, cb) {
      import('components/Settings').then(module => cb(null, module.default), asyncRouteFail);
    },
  },

  error: {
    getComponent(_, cb) {
      import('components/ErrorPage').then(module => cb(null, module.default), asyncRouteFail);
    },
  },

  styleguide: {
    getComponent(_, cb) {
      import('components/StyleGuide').then(module => cb(null, module.default), asyncRouteFail);
    },
  },

  news: {
    getComponent(_, cb) {
      import('components/News').then(module => cb(null, module.default), asyncRouteFail);
    },
  },
};

// Route objects
export const routes = {
  styleguide: { path: '/style-guide', ...views.styleguide },
  news: { ...views.news },

  // Everything that lives inside "App"
  app: {
    article: { path: '/article/:articleId', ...views.article },
    search: { path: '/search', ...views.search },
    settings: { path: '/settings', ...views.settings },
    feedback: { path: '/feedback', ...views.feedback },
    profile: { path: '/profile', ...views.profile },
    foodMenu: { path: '/menus/:cafeId/:mealName', ...views.foodMenu },
    foodMenus: { path: '/menus/:cafeId', ...views.foodMenus },
    error404: { path: '/404', ...views.error },
    error500: { path: '/500', ...views.error },
  },
};