如何修复响应式抽屉以返回主链接

Question

我已经设置了一个响应式抽屉ResponsiveDrawer.js这是它的外观

class ResponsiveDrawer extends React.Component {
  state = {
    mobileOpen: false,
  };

  handleDrawerToggle = () => {
    this.setState(state => ({ mobileOpen: !state.mobileOpen }));
  };

  render() {
    const { classes, children } = this.props;
    const { mobileOpen } = this.state;

    const drawer = (
      <div>
        <Hidden smDown>
        <div className={classes.toolbar} />
        </Hidden>
        <MenuList>
          <MenuItem component={Link} to="/" >
          Home

          </MenuItem>
          <MenuItem component={Link} to="/PatientdataPatient">
          Users
          </MenuItem>

        </MenuList>
        <MenuList>

          <MenuItem component={Link} to="/BeraterdataBerater">
          Beraters
          </MenuItem>
        </MenuList>

      </div>
    );

    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar position="fixed" className={classes.appBar}>
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerToggle}
              className={classes.menuButton}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit" noWrap>
              Responsive drawer
            </Typography>
          </Toolbar>
        </AppBar>
        <nav className={classes.drawer}>
          {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
          <Hidden smUp implementation="css">
            <Drawer
              container={this.props.container}
              variant="temporary"
              open={mobileOpen}
              onClose={this.handleDrawerToggle}
              classes={{
                paper: classes.drawerPaper,
              }}
            >
              {drawer}
            </Drawer>
          </Hidden>
          <Hidden xsDown implementation="css">
            <Drawer
              classes={{
                paper: classes.drawerPaper,
              }}
              variant="permanent"
              open
            >
              {drawer}
            </Drawer>
          </Hidden>
        </nav>
        <main className={classes.content}>
          <div className={classes.toolbar} />
          {children}
        </main>
      </div>
    );
  }
}

ResponsiveDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  // Injected by the documentation to work in an iframe.
  // You won't need it on your project.
  container: PropTypes.object,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles)(ResponsiveDrawer);

我还在另一个课程中设置了路由

class App extends Component {


  state = { group: [] }

  async componentDidMount() {
    try {
      const session = await Auth.currentSession();
      const group = session.accessToken.payload["cognito:groups"]

      this.setState({ group })
      console.log(group)
    } catch (err) {
      console.log('error: ', err)
    }

  } 


  render() {


  //  if ( this.state.group == "Berater" ) {
    return (
            <div>
              <ResponsiveDrawer PatientdataPatient={PatientdataPatient}>
                <Switch>

                <Route exact path="/" render={() => <div><PatientdataPatient/></div>}/>
                <Route path="/PatientdataPatient" render={props =>
                 <PatientdataPatient {...props}
                PatientdataPatient={PatientdataPatient}/>
                }></Route>
                <Route path="/BeraterdataBerater" render={props =>
                 <BeraterdataBerater {...props}
                 BeraterdataBerater={BeraterdataBerater}/>
                }></Route>

                </Switch>

              </ResponsiveDrawer>



            </div>
    );

现在的问题是，当我单击（<MenuItems> [第一代码段]）时，除了第一项和其他2项外，信息未在（<main> [第二代码段]）中返回。只需加载到各自的页面即可。有人知道如何解决这个问题吗？谢谢！