title: Try render components in a Root component
body: <p>I have this problem for week now and just can't find solutions.
  I try to render the components in the Root component. </p>
  
  <p><strong>index.js file:</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  import {
      BrowserRouter as Router,
      Route,
      Link,
  } from 'react-router'
  
  import IndexContent from './components/indexContent';
  import IndexHome from './components/indexHome';
  import Root from './components/root';
  
  
  class App extends Component{
    render(){
      return(
        &lt;Router&gt;
          &lt;Root&gt;
            &lt;Route exact path="/" component={IndexContent}/&gt;
            &lt;Route path="/indexhome" component={IndexHome} /&gt;
          &lt;/Root&gt;
         &lt;/Router&gt;
        )
    }
  }
  
  export default App;
  
  ReactDOM.render( &lt;App/&gt;, document.getElementById('wrapper'));
  </code></pre>
  
  <p><strong>root.js file:</strong></p>
  
  <pre><code>import React,{Component} from 'react';
  
  import NavBar from './NavBar';
  import Footer from './footer';
  
  class Root extends Component{
      render(){
          return(
                  &lt;div&gt;
                      &lt;NavBar/&gt;
                      {this.props.children}
                      &lt;Footer/&gt;
                  &lt;/div&gt;
          )
      }
  };
  
  
  export default Root;
  </code></pre>
  
  <p><strong>indexContent.js file:</strong></p>
  
  <pre><code>import React,{Component} from 'react';
  
  
  class IndexContent extends Component{
      render(){
          return(
                  &lt;h1&gt;IndexContent&lt;/h1&gt;
              )
      }
  };
  
  
  
  export default IndexContent;
  </code></pre>
  
  <p><strong>indexHome.js file:</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  
  
  class IndexHome extends Component{
  
      render(){
          return(
              &lt;h1&gt;IndexHome&lt;/h1&gt;
          )
      }
  }
  
  export default IndexHome;
  </code></pre>
  
  <p>and the error that I am getting is:</p>
  
  <p>1) <strong>Warning:</strong> <strong>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. Check the render method of <code>App</code>.</strong></p>
  
  <p>2) <strong>Uncaught Error: Element 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. Check the render method of <code>App</code>.
      at invariant (bundle.js:946)
      at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (bundle.js:12837)
      at ReactCompositeComponentWrapper.performInitialMount (bundle.js:22340)
      at ReactCompositeComponentWrapper.mountComponent (bundle.js:22231)
      at Object.mountComponent (bundle.js:4663)
      at ReactCompositeComponentWrapper.performInitialMount (bundle.js:22344)
      at ReactCompositeComponentWrapper.mountComponent (bundle.js:22231)
      at Object.mountComponent (bundle.js:4663)
      at mountComponentIntoNode (bundle.js:12047)
      at ReactReconcileTransaction.perform (bundle.js:7037)</strong></p>