React Material-UI ListItemIcon组件，如何导航到其他页面？

Question

我正在使用Material UI框架。 我希望在此Drawer组件内的ListItemIcon组件中，单击ListItemIcon组件内的图标时能够导航到其他页面。

我尝试了onClick和href属性，但似乎不起作用。

<Drawer
        className={classes.drawer}
        variant="persistent"
        anchor="left"
        open={open}
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.drawerHeader}>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
          </IconButton>
        </div>
        <Divider />
        <List>
          {['Home', 'Volunteers', 'My Profile', 'About us', 'Logout'].map((text, index) => (
            <ListItem button key={text} >
              {/* <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon> */}
              <ListItemIcon>
                {index === 0 && <HomeIcon onClick={() => window.open('http://localhost:3000/')}/>}
                {index === 1 && <SupervisorAccountIcon href="./volunteers" />}
                {index === 2 && <AccountCircleIcon />}
                {index === 3 && <InfoIcon/>}
                {index === 4 && <ExitToAppIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
      </Drawer>