title: exporting multiple modules in react.js
body: <p>New to react.js and trying to following <a href="https://www.tutorialspoint.com/reactjs/reactjs_router.htm" rel="noreferrer" title="tutorial">tutorial</a>. Unfortunately the code given in the page didn't work.  webpack complained </p>
  
  <pre><code>ERROR in ./App.jsx
  Module build failed: SyntaxError: Only one default export allowed per module.
  </code></pre>
  
  <p>Wonder how to fix it.  Thanks. </p>
  
  <p>=== App.jsx====</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'
  
  class App extends React.Component {
     render() {
        return (
           &lt;div&gt;
              &lt;ul&gt;
                 &lt;li&gt;&lt;Link to = "/home"&gt;Home&lt;/Link&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;Link to = "/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;Link to = "/contact"&gt;Contact&lt;/Link&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
             {this.props.children}
           &lt;/div&gt;
        )
     }
  }
  
  export default App;
  
  class Home extends React.Component {
     render() {
        return (
           &lt;div&gt;
              &lt;h1&gt;Home...&lt;/h1&gt;
           &lt;/div&gt;
        )
     }
  }
  
  export default Home;
  
  class About extends React.Component {
     render() {
        return (
           &lt;div&gt;
              &lt;h1&gt;About...&lt;/h1&gt;
           &lt;/div&gt;
        )
     }
  }
  
  export default About;
  
  class Contact extends React.Component {
     render() {
        return (
           &lt;div&gt;
              &lt;h1&gt;Contact...&lt;/h1&gt;
           &lt;/div&gt;
        )
     }
  }
  
  export default Contact;
  </code></pre>
  
  <p>=== main.js ===</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App.jsx';
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById('app'));
  </code></pre>
  
  <p><strong>UPDATE1</strong></p>
  
  <p>I commented out all the <code>export default</code> and added the following at the end</p>
  
  <pre><code>module.exports = {
      App: App,
      Home: Home,
      About: About,
      Contact: Contact
  }
  </code></pre>
  
  <p>Now there is no compile error but the web page is a blank. I am not sure what is wrong here.</p>