React/Material-UIでDrawer&Routingを実装

import React, { useState } from "react";
import {
  AppBar,
  Divider,
  Drawer,
  IconButton,
  List,
  ListItem,
  ListItemText,
  Toolbar,
  Typography,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import MapIcon from "@material-ui/icons/Map";
import TimelineIcon from "@material-ui/icons/Timeline";
import ChatIcon from "@material-ui/icons/Chat";

const Header = () => {
  const [open, setOpen] = useState(false);
  const handleDrawerOpen = () => {
    setOpen(true);
  };
  const handleDrawerClose = () => {
    setOpen(false);
  };
  return (
    <div>
      <AppBar>
        <Toolbar>
          <IconButton onClick={handleDrawerOpen}>
            <MenuIcon />
          </IconButton>
          <Typography>Header</Typography>
        </Toolbar>
      </AppBar>
      <Drawer open={open}>
        <IconButton onClick={handleDrawerClose}>
          <ChevronLeftIcon />
        </IconButton>
        <Divider />
        <List>
          <ListItem button="AAAAA">
            <MapIcon />
            <ListItemText primary="AAAAA" />
          </ListItem>
          <ListItem button="BBBBB">
            <TimelineIcon />
            <ListItemText primary="BBBBB" />
          </ListItem>
          <ListItem button="CCCCC">
            <ChatIcon />
            <ListItemText primary="CCCCC" />
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
};

export default Header;

import logo from "./logo.svg";
import "./App.css";
import Header from "./components/ui/Header";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Switch>
          <Route exact path="/" component={() => <div>/</div>} />
          <Route exact path="/AAAAA" component={() => <div>AAAAA</div>} />
          <Route exact path="/BBBBB" component={() => <div>BBBBB</div>} />
          <Route exact path="/CCCCC" component={() => <div>CCCCC</div>} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;