There's more...

Most of the time, the screens that make up your app will follow the same pattern. Rather than have repetitive code in the render property of your routes, you can create a higher-order function that accepts arguments for the unique parts of the screen and returns a new component that can be used by the render prop.

In this example, the only two pieces of data that are unique to each screen are the title and the content text. Here's a generic function that builds a new functional component that can be used with every Route component in the app:

const screen = (title, content) => () => (
  <Fragment>
    <MyToolbar title={title} />
    <Typography>{content}</Typography>
  </Fragment>
);

To use this function, call it in the render property, such as in the following code block:

export default withStyles(styles)(({ classes }) => (
  <div className={classes.root}>
    <Route exact path="/" render={screen('Home', 'Home')} />
    <Route exact path="/page2" render={screen('Page 2', 'Page 2')} />
    <Route exact path="/page3" render={screen('Page 3', 'Page 3')} />
  </div>
));

Now you have a clear separation of the static screen structure that stays the same for every screen in the app, and the pieces that are unique to each screen that passed as arguments to the screen() function.