Мне нужно сделать родительский админ, как приборная панель с материалом UI в React

Question

У меня есть этот код.

Приложение. js

  return (
    <div className="h-100">
      {alert.message && (
        <div className={`alert ${alert.type}`}>{alert.message}</div>
      )}
      <Router history={history}>
        <Switch>
          <Route path="/login" component={LoginPage} />
          <PrivateRoute exact path="/admin/" component={NavBarComponent} />
          <Redirect from="/" to="/admin/home" />
        </Switch>
      </Router>
    </div>
  );

NavBarComponent. js

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: open
        })}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            className={clsx(classes.menuButton, {
              [classes.hide]: open
            })}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap>
            FabrITSoft
          </Typography>
        </Toolbar>
      </AppBar>

      <Router history={history}>
        <Drawer
          variant="permanent"
          className={clsx(classes.drawer, {
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open
          })}
          classes={{
            paper: clsx({
              [classes.drawerOpen]: open,
              [classes.drawerClose]: !open
            })
          }}
        >
          <div className={classes.toolbar}>
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === "rtl" ? (
                <ChevronRightIcon />
              ) : (
                <ChevronLeftIcon />
              )}
            </IconButton>
          </div>
          <Divider />
          <List>
            <ListItem
              button
              key="listusers" /* component={props => <Link to="/listusers" {...props} />} */
            >
              <ListItemIcon>
                <ListAlt />
              </ListItemIcon>
              <ListItemText primary="Nuevo usuario" />
            </ListItem>
            <ListItem
              button
              key="adduser" /*  component={props => <Link to="/adduser" {...props} />} */
            >
              <ListItemIcon>
                <PersonAdd />
              </ListItemIcon>
              <ListItemText primary="Lista usuarios" />
            </ListItem>
          </List>
          <Divider />
          <List>
            <ListItem
              button
              key="logout" /* component={props => <Link to="/logout" {...props} />} */
            >
              <ListItemIcon>
                <ExitToApp />
              </ListItemIcon>
              <ListItemText primary="Salir" />
            </ListItem>
          </List>
        </Drawer>
        <main className={classes.content}>
          <div className={classes.toolbar} />
          <Switch>
            {/* <PrivateRoute exact path="/" component={HomePage} /> */}
            <PrivateRoute
              path="/admin/home"
              component={HomePage}
              key="listusers"
            />
            <PrivateRoute
              path="/admin/adduser"
              component={RegisterPage}
              key="adduser"
            />
          </Switch>
        </main>
      </Router>
    </div>
  );

рендеринг неверный, в пути / admin / home, показано это.

Я не знаю как сделать так, чтобы у маршрутов был дочерний компонент компонента в mainContainer Drawer