React Material-UI Cookbook

How it works...

Let's start by looking at the Route components that render content based on the active the Route components:

<Grid item className={classes.alignContent}>  <Route    exact    path="/"    render={() => <Typography>Home</Typography>}  />  <Route    exact    path="/page2"    render={() => <Typography>Page 2</Typography>}  />  <Route    exact    path="/page3"    render={() => <Typography>Page 3</Typography>}  /></Grid>

There's a Route component used for each path in your app. The render() function returns the content that should be rendered within this Grid item when the path property matches the current URL.

Next, let's look at one of the ListItem components within the Drawer component, as follows:

<ListItem  component={Link}  to="/" onClick={() => setOpen(false)} ...