title: React router dynamic routes not rendering component
body: <p>I’m trying to get react router dynamic routing to work by following this example: <a href="https://github.com/rackt/react-router/tree/master/examples/huge-apps" rel="nofollow">https://github.com/rackt/react-router/tree/master/examples/huge-apps</a></p>
  
  <p>Here’s my setup:</p>
  
  <p><code>webpack.config.js</code>:</p>
  
  <pre><code>module.exports = {
    devtool: 'inline-source-map',
    entry: './js/app.js',
    output: {
      path: '../public',
      filename: 'test-app.js',
      chunkFilename: '[id].chunk.js',
      publicPath: '/public/'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: [
              'es2015',
              'react'
            ]
          }
        }
      ]
    }
  </code></pre>
  
  <p><code>./js/app.js</code>:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { createHistory, useBasename } from 'history';
  import { Router } from 'react-router';
  
  const history = useBasename(createHistory)({
    basename: '/'
  });
  
  const rootRoute = {
    component: 'div',
    childRoutes: [{
      path: '/',
      component: require('./components/App')
    }]
  };
  
  ReactDOM.render(
      &lt;Router history={history} routes={rootRoute} /&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p><code>./components/App.js</code>:</p>
  
  <pre><code>import React from 'react';
  
  console.log('testing');
  
  export default class App extends React.Component {
    render() {
      console.log('App');
      return (
          &lt;div&gt;
            App!
          &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p><code>index.html</code>:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test App&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          Hello
          &lt;div id="root"&gt;&lt;/div&gt;
          &lt;script src="public/test-app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run the server, I see <em>Hello</em> displayed from <code>index.html</code>, I also see <code>console.log('testing')</code> from <code>App.js</code>, but the actual <code>App.js</code> component does not render. Any ideas why?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong>
  If I change <code>./components/App.js</code> to ES5 syntax below, it works! Why is that? Does react router's <code>component: require('./components/App')</code> not work with ES6?</p>
  
  <pre><code>var React = require('react');
  
  var App = React.createClass({
    render: function() {
      return (
        &lt;div&gt;
          App!
        &lt;/div&gt;
      )
    }
  });
  
  module.exports = App;
  </code></pre>