AppBar disappears between React routes

I have an almost working simple react routing project. I have an AppBar and a Drawer (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 AppBar, thus the navigation for the rest of the app once you are on a certain page, is no longer there. I am using react-router-dom v4.x.x incase that matters to you.

index.js

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((
  <MuiThemeProvider>
    <Router>
      <Route exact path="/" component={MainView}>
        <IndexRoute component={CloudProperties} />
        <Route path="cloudproperties" component={CloudProperties} />
        <Route path="cloudpropertiesnew" component={CloudPropertiesNew} />
        <Route path="servicedetails" component={ServiceDetails} />
        <Route path="serviceregistrationsummary" component={ServiceRegistrationSummary} />
      </Route>
    </Router>
  </MuiThemeProvider>
), document.getElementById('app'));

main.js (app.js)

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 (
      <div>
        <Header
          routerProps={this.props.children} />
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

MainView.defaultProps = {
};

export default MainView;

I know it has to do with the children being injected but I thought I was doing that in the main.js with {this.props.children} (I'm new to react so sorry if obvious).