如何使用带有Material UI抽屉的React Router在点击时更改内容？

npm install react-router-dom @material-ui/core

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Drawer, List, ListItem, ListItemText } from '@material-ui/core';

const DrawerComponent = () => {
  return (
    <Drawer>
      <List>
        <ListItem button component={Link} to="/">
          <ListItemText primary="首页" />
        </ListItem>
        <ListItem button component={Link} to="/about">
          <ListItemText primary="关于" />
        </ListItem>
        <ListItem button component={Link} to="/contact">
          <ListItemText primary="联系我们" />
        </ListItem>
      </List>
    </Drawer>
  );
};

const App = () => {
  return (
    <Router>
      <DrawerComponent />
      <Switch>
        <Route exact path="/">
          <h1>首页内容</h1>
        </Route>
        <Route path="/about">
          <h1>关于内容</h1>
        </Route>
        <Route path="/contact">
          <h1>联系我们内容</h1>
        </Route>
      </Switch>
    </Router>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));