title: How to change component with Sidebar material-ui React
body: <p>im using React and i am new.I use Drawer, but I don't know how to display the desired component by clicking on each button. You can see the Drawer code here</p>
  <pre><code>export default function MiniDrawer() {
    const classes = useStyles();
    const theme = useTheme();
    const [open, setOpen] = React.useState(true);
  
    const handleDrawerOpen = () =&gt; {
      setOpen(true);
    };
  
    const handleDrawerClose = () =&gt; {
      setOpen(false);
    };
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;CssBaseline /&gt;
        &lt;AppBar
          position=&quot;fixed&quot;
          className={clsx(classes.appBar, {
            [classes.appBarShift]: open
          })}
        &gt;
          &lt;Toolbar&gt;
            &lt;IconButton
              color=&quot;inherit&quot;
              aria-label=&quot;open drawer&quot;
              onClick={handleDrawerOpen}
              edge=&quot;start&quot;
              className={clsx(classes.menuButton, {
                [classes.hide]: open
              })}
            &gt;
              &lt;MenuIcon /&gt;
            &lt;/IconButton&gt;
            &lt;Typography variant=&quot;h6&quot; noWrap&gt;
              Mini variant drawer
            &lt;/Typography&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
        &lt;Drawer
          variant=&quot;permanent&quot;
          className={clsx(classes.drawer, {
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open
          })}
          classes={{
            paper: clsx({
              [classes.drawerOpen]: open,
              [classes.drawerClose]: !open
            })
          }}
        &gt;
          &lt;div className={classes.toolbar}&gt;
            &lt;IconButton onClick={handleDrawerClose}&gt;
              {theme.direction === &quot;rtl&quot; ? (
                &lt;ChevronRightIcon /&gt;
              ) : (
                &lt;ChevronLeftIcon /&gt;
              )}
            &lt;/IconButton&gt;
          &lt;/div&gt;
          &lt;Divider /&gt;
          &lt;List&gt;
            {routes.map((text, index) =&gt; (
              &lt;ListItem button key={text}&gt;
                &lt;ListItemIcon&gt;
                  {index % 2 === 0 ? &lt;InboxIcon /&gt; : &lt;MailIcon /&gt;}
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary={text} /&gt;
              &lt;/ListItem&gt;
            ))}
          &lt;/List&gt;
          &lt;Divider /&gt;
        &lt;/Drawer&gt;
        &lt;main className={classes.content}&gt;
          &lt;div className={classes.toolbar} /&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I want to click each button to run the desired component. The components are located in the ./src path. Thank you very much for editing my code from <a href="https://codesandbox.io/s/cold-rain-ft2zk?file=/pages/demo.js" rel="nofollow noreferrer">Code Sandbox</a> for a deep understanding of the subject</p>