With navigation

Material-UI apps are typically made up of several pages that are linked together using a router, such as react-router. Each page renders an App Bar that has information specific to that page. This is one example of when the abstraction that you created in the Toolbar abstraction recipe comes in handy.

How to do it...

Let's say that you're building an app that has three pages. On each page, you want to render an App Bar with the title prop of the page. Furthermore, the menu in the App Bar should contain links to the three pages. Here's how to do it:

import React, { Fragment, Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

import...