如何為側邊欄中的每個部分制作不同的應用欄？ [ReactJs]

Question

我正在使用material-ui（@ material-ui / core）作為響應式抽屜和AppBar。 我想為抽屜的每個部分都有特定的AppBar。 例如，當我單擊“時間表”部分時，AppBar標簽必須更改為“時間表”並在其上顯示其他內容，依此類推。 怎么做以及最好的方法是什么？

這是我的響應式抽屜代碼：

const drawerWidth = 230;

const color = createMuiTheme({
  overrides: {
    MuiMenuItem: {

      "selected": {
        backgroundColor: "#2196f3 !important",
        color: '#fff !important',
      },
      },
    },
  palette: {
    primary: {
      light: '#000',
      main: '#2196f3',
      dark: '#000',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#fff',
      dark: '#ba000d',
      contrastText: '#555',
    },
  },
  },
)

const styles = theme => ({
  root: {
    display: 'flex',
    color: "#000",
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },
  nested: {
    paddingLeft: theme.spacing.unit * 5,
    color: '#555',
  },
  paddingRight: {
    paddingRight: theme.spacing.unit * 2,
  },
  drawer: {
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0,
    },
  },
  appBar: {
      marginLeft: drawerWidth,
      [theme.breakpoints.up('sm')]: {
        width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  menuButton: {
    marginRight: 20,
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
  },
  toolbar: theme.mixins.toolbar,
  backgroundColor: "#2196f3",
  drawerPaper: {
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3,
  },
  menuItemColor: {
    color: '#555',
  },
  navUserData: {
    backgroundColor: "#2196f3",
    backgroundImage: "url('https://images.unsplash.com/photo-1531315630201-bb15abeb1653?ixlib=rb-1.2.1&auto=format&fit=crop&w=375&q=80')",
    backgroundSize: 'cover',
    overflow: 'hidden',
    height: "130px",
    color: "#fff",
    padding: "15px",
  },
  avatar: {
    margin: 10,
  },
  orangeAvatar: {
    marginBottom: "10px",
    color: '#fff',
    backgroundColor: deepOrange[500],
  },
  purpleAvatar: {
    marginBottom: "12px",
    color: '#fff',
    backgroundColor: deepPurple[400],
  },
});

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

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

  handleClick = () => {
    this.setState(state => ({ open: !state.open }));
  };

  logout(){
    localStorage.setItem('userData', '');
    localStorage.clear();
    this.setState({redirect: true})
}

  render() {
    const { classes, location: {pathname}, children } = this.props;
    const { mobileOpen } = this.state;
    const drawer = (
      <div>
        <div className={classes.navUserData}>
          <Grid container >
          <Avatar className={classes.purpleAvatar}>JD</Avatar>
          <h5>John Doe John Doe</h5>
          <br />
          <p>user id</p>
          </Grid>
        </div>
        <MenuList>
          <MenuItem component={Link} className={classes.menuItemColor} to='/' selected={'/' === pathname}>
            <Home className={classes.paddingRight}/>
              Home
          </MenuItem>
          <MenuItem component={Link} className={classes.menuItemColor} to='/timetable' selected={'/timetable' === pathname}>
            <Schedule className={classes.paddingRight}/>
              Timetable
          </MenuItem>
          <MenuItem component={Link} className={classes.menuItemColor} to='/assignments' selected={'/assignments' === pathname}>
            <Assignment className={classes.paddingRight}/>
              Assignments
          </MenuItem>
          <MenuItem className={classes.menuItemColor} onClick={this.handleClick}>
            <Book className={classes.paddingRight}/>
              E-books
            {this.state.open ? <ExpandLess /> : <ExpandMore />}
          </MenuItem>
          <Collapse in={this.state.open} timeout="auto" unmountOnExit>
            <MenuList component="div" disablePadding>
              <MenuItem className={classes.nested} component={Link} to='/freshmen' selected={'/freshmen' === pathname}>
                <LooksOne className={classes.paddingRight}/>
                  Freshman
              </MenuItem>
              <MenuItem className={classes.menuItemColor} className={classes.nested} component={Link} to='/sophomore' selected={'/sophomore' === pathname}>
                <LooksTwo className={classes.paddingRight}/>
                  Sophomore
              </MenuItem>
              <MenuItem className={classes.menuItemColor} className={classes.nested} component={Link} to='/juniorlib' selected={'/juniorlib' === pathname}>
                <Looks3 className={classes.paddingRight}/>
                  Junior
              </MenuItem>
              <MenuItem className={classes.menuItemColor} className={classes.nested} component={Link} to='/seniorlib' selected={'/seniorlib' === pathname}>
              <Looks4 className={classes.paddingRight}/>
                  Senior
              </MenuItem>
            </MenuList>
          </Collapse>
          <MenuItem className={classes.menuItemColor} component={Link} to='/videotutorial' selected={'/videotutorial' === pathname}>
            <Subscriptions className={classes.paddingRight}/>
              Video Tutorials
          </MenuItem>
          <MenuItem className={classes.menuItemColor} component={Link} to='/teamsearch' selected={'/teamsearch' === pathname}>
            <PersonAdd className={classes.paddingRight}/>
              Team Search
          </MenuItem>
          <MenuItem className={classes.menuItemColor} component={Link} to='/groupchange' selected={'/groupchange' === pathname}>
            <FindReplace className={classes.paddingRight}/>
              Group Change
          </MenuItem>
          <Divider />
          <MenuItem onClick={this.logout} className={classes.menuItemColor} component={Link} to='/login' selected={'/login' === pathname}>
            <ExitToApp className={classes.paddingRight}/>
              Logout
          </MenuItem>
        </MenuList>
      </div>
    );

    return (
      <MuiThemeProvider theme={color}>
      <Fragment>
      <div className={classes.root}>
        <CssBaseline />
        <AppBar position="fixed" className={classes.appBar} color="secondary">
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerToggle}
              className={classes.menuButton}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit" noWrap>
              IUTBook
            </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}>
            { children }
        </main>
      </div>
      </Fragment>
      </MuiThemeProvider>
    );
  }
}

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 compose(
  withRouter,
  withStyles(styles),
)(ResponsiveDrawer);

Answer 1

您可以制作一個在不同路線上呈現不同AppBar的Switch：

<Switch>
    <Route
        path="/timetable"
        component={TimetableAppBar}
    />
    <Route
        path="/assignments"
        component={AssignmentsAppBar}
    />
    <Route component={AppBar} />
</Switch>