How do I link to another page in my MUI mini drawer sidebar?

Question

I've tried to encapsulate my ListItem component with <Link to"/create> but it doesn't work, i've also tried using the history option but that confused me. My codesandbox:
codesandbox.io/s/funny-einstein-deuqhi?file=/src/App.js

This is my sidebar.js (without all the imports and the creation of mixin&drawerheader and co, the link on the appbar to my createsite works, i want the same for my sidebar listitems. i want my listitem with the text ."add to-do" to link to the "\create" page):

const openedMixin = (theme) => (...);
const closedMixin = (theme) => (...);
const DrawerHeader = styled(...);
const AppBar = styled(...);
const Drawer = styled(...);

export default function MiniDrawer() {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  const itemsList = [
    {
      text: "Calendar",
      icon: <EventAvailableOutlinedIcon style={{ fill: 'white' }} />,
    },
    {
      text: "Add To-do",
      icon: <AddBoxTwoToneIcon style={{ fill: 'white' }} />
    }
  ]

  return (
    <Router>
      <Box sx={{ display: 'flex' }}>
        <CssBaseline />
        <AppBar position="fixed" open={open} style={{ background: 'white' }}>
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              edge="start"
              sx={{
                marginRight: 5,
                ...(open && { display: 'none' }),
              }}
            >
              <MenuIcon style={{ fill: '#85CEE9' }} />
            </IconButton>
            <Link to="/create">create</Link>
            <Typography variant="h6" noWrap component="div" style={{ color: "#85CEE9" }}>
              project
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer variant="permanent" open={open}>
          <DrawerHeader>
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === 'rtl' ? <ChevronRightIcon style={{ fill: 'white' }} /> : <ChevronLeftIcon style={{ fill: 'white' }} />}
            </IconButton>
          </DrawerHeader>
          <Divider />
          <List>
            {itemsList.map((item, index) => {
              const { text, icon } = item;
              return (
                // <Link to="/create">
                <Link to="/create">
                  <ListItem button component={Link} to="/create" onClick={onItemClick('Page 2')} key={text}>
                    {icon && <ListItemIcon >{icon}</ListItemIcon>}
            // <ListItemText primary={text} style={{ color: "white" }} />
                    <Link to="/create">create</Link>
                  </ListItem>
                </Link>
                // </Link>
              );
            })}
          </List>
        </Drawer>
      </Box>
    </Router>
  );
}```

Answer 1

In the sandbox you linked you weren't using the Link component at all in the drawer, so nothing was being linked to.

Render the ListItem component as a Link component and pass the appropriate link props.

Example:

const itemsList = [
  {
    text: "Calendar",
    icon: <EventAvailableOutlinedIcon style={{ fill: "white" }} />,
    to: "/create" // <-- add link targets
  },
  {
    text: "Add To-do",
    icon: <AddBoxTwoToneIcon style={{ fill: "white" }} />,
    to: "/add-todo"
  }
];

To the ListItem component, specify the Link component to be the component to render the list item as, and pass the current mapped item's to property.

<List>
  {itemsList.map((item, index) => {
    const { text, icon } = item;
    return (
      <ListItem component={Link} to={item.to} button key={text}>
        {icon && <ListItemIcon>{icon}</ListItemIcon>}
        <ListItemText primary={text} style={{ color: "white" }} />
      </ListItem>
    );
  })}
</List>

Answer 2

Instead of using Link within your List component, use ListItem, ListItemButton, and ListItemText:

  <List>
    {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
      <ListItem key = {text} disablePadding>
        <ListItemButton onClick = {handleNav} >
          <ListItemIcon>
            {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
          </ListItemIcon>
          <ListItemText primary={text} />
        </ListItemButton>
      </ListItem>
    ))}
  </List>

Create the method to pass to each ListItemButton's onClick:

import { useHistory } from 'react-router-dom'

const history = useHistory()

const handleNav = (event) =>
{
    // Do whatever you need to do then push to the new page
    history.push('/create')
}

Depending on what version of react-router you're using, your actual method to push to a new page may vary (useHistory for v5, useNavigate for v6, etc.).