title: AppBar disappears between React routes
body: <p>I have an almost working simple react routing project. I have an <code>AppBar</code> and a <code>Drawer</code> (using mui). In the drawer are three items which will re-route the application. I have the routing working fine, but the issue I am running into is that the <code>AppBar</code>, thus the navigation for the rest of the app once you are on a certain page, is no longer there. I am using <code>react-router-dom v4.x.x</code> incase that matters to you.</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import 'core-js/fn/object/assign';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import MainView from './pages/Main';
  import { BrowserRouter as Router, Route, IndexRoute} from 'react-router-dom';
  import injectTapEventPlugin from 'react-tap-event-plugin';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import CloudProperties from './components/cloudproperties';
  import CloudPropertiesNew from './components/cloudpropertiesnew';
  import ServiceDetails from './components/servicedetails';
  import ServiceRegistrationSummary from './components/serviceregistrationsummary';
  
  injectTapEventPlugin();
  
  ReactDOM.render((
    &lt;MuiThemeProvider&gt;
      &lt;Router&gt;
        &lt;Route exact path="/" component={MainView}&gt;
          &lt;IndexRoute component={CloudProperties} /&gt;
          &lt;Route path="cloudproperties" component={CloudProperties} /&gt;
          &lt;Route path="cloudpropertiesnew" component={CloudPropertiesNew} /&gt;
          &lt;Route path="servicedetails" component={ServiceDetails} /&gt;
          &lt;Route path="serviceregistrationsummary" component={ServiceRegistrationSummary} /&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;
    &lt;/MuiThemeProvider&gt;
  ), document.getElementById('app'));
  </code></pre>
  
  <p><strong>main.js (app.js)</strong></p>
  
  <pre><code>require('normalize.css/normalize.css');
  require('styles/App.css');
  
  import React from 'react';
  import Header from '../components/Header';
  
  
  
  class MainView extends React.Component {
    constructor(props){
      super(props);
  
      this.state = {
      };
  
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Header
            routerProps={this.props.children} /&gt;
          &lt;div&gt;
            {this.props.children}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  MainView.defaultProps = {
  };
  
  export default MainView;
  </code></pre>
  
  <p>I know it has to do with the children being injected but I thought I was doing that in the <code>main.js</code> with <code>{this.props.children}</code> (I'm new to react so sorry if obvious).</p>