Code-Splitting-RRv4-alpha.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Match, Miss }from 'react-router';
import AuthenticatedMatch from '../AuthenticatedMatch';
import styles from './App.scss';
import Header from './Header';
import Footer from './Footer';
import configureStore from '../../store/configureStore';
import RoleActions from '../../actions/roles';

const components = {
  loginView: require('../LoginView').default,
  pageNotFoundView: require('./PageNotFound').default,
  homePage: require('../HomePage').default,
  adminLayout: require.ensure([], function (require) {
    return require('../Admin').default;
  }, 'admin'),
  podsLayout: require('../Pods').default,
};

const store = configureStore();
// on app start load roles
store.dispatch(RoleActions.get());
export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className={styles.container}>
            <Header className={styles.header} />
            <div className={styles.content}>
              <Match exactly pattern="/" component={components.homePage} />
              <Match exactly pattern="(/login)?" component={components.loginView} />
              <AuthenticatedMatch pattern="/admin" roles={["Admin", "Supervisor"]} component={components.adminLayout} />
              <AuthenticatedMatch pattern="/pods" component={components.podsLayout} />
              <Miss component={components.homePage} />
            </div>
            <Footer className={styles.footer} />
          </div>
        </Router>
      </Provider>
    );
  }
}

Thank you! I'll try to reproduce in my code.