title: When I use react router with webpack, it shows the error "React.createElement: type is invalid"
body: <p>index.html</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Webpack and React&lt;/title&gt;
          &lt;link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cerulean/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="app"&gt;hello&lt;/div&gt;
          &lt;script src="index.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from "react";
  import ReactDom from "react-dom";
  import {BrowserRouter as Router, Route} from "react-router";
  
  import Layout from "./pages/Layout";
  import Featured from "./pages/Featured";
  import Archives from "./pages/Archives";
  import Settings from "./pages/Settings";
  
  const app = document.getElementById('app');
  
  ReactDom.render(
      &lt;Router&gt;
              &lt;Route path = "/" component={Layout}/&gt;
      &lt;/Router&gt;,
      app);
  </code></pre>
  
  <p>Layout.js</p>
  
  <pre><code>import React from "react";
  
  
  export default class Layout extends React.Component{
      render(){
          return(
              &lt;div&gt;
                  &lt;h1&gt;Discussion Board&lt;/h1&gt;
              &lt;/div&gt;
  
          );
      }
  }
  </code></pre>
  
  <p>I follow the online example to learn react router with webpack but it shows the error:</p>
  
  <pre><code>Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a 
  class/function (for composite components) but got: undefined. You likely forgot to export your 
  component from the file it's defined in, or you might have mixed up default and named imports.
  </code></pre>
  
  <p>I cannot find what reason to cause the error. Someone said that I might not add the export default but I have already added it. It is still error.</p>