Navigating with tabs

Tabs are another common navigation pattern found in modern web apps. The Material-UI Tabs component lets us use tabs as links and hook them up to a router. Let's take a look at an example of how to do this. Here is the App component:

import "typeface-roboto";
import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";

const tabContentStyle = {
  padding: 16
};

function TabContainer({ value }) {
  return (
    <AppBar position="static">
      <Tabs value={value}>
        <Tab label="Item One" component={Link} to="/" />
        <Tab label="Item Two" component={Link} to="/page2" />
        <Tab label...