Router should be separate from other components

In App.js the Toolbar is mixed with the Router. In general, the router should not be mixed with other components related to UI. Relevant read about why .

One good way of reusing the the Toolbar and Footer without mixing in with the router is to create a single component (i.e. Layout) that wraps children and then you can re-use in each one of your pages, something like this :

return (
<>
  <Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
  <SideDrawer show={this.state.sideDrawerOpen} />
  {backdrop}
  {this.props.children}
  <Footer />
<>
);

Child Props Example

daniellesuper / elevationsoftware

Router should be separate from other components #2