如何链接到我的 MUI 迷你抽屉侧边栏中的另一个页面？

Question

我尝试使用 <Link to"/create> 封装我的 ListItem 组件，但它不起作用，我也尝试使用 history 选项，但这让我感到困惑。我的代码框：
codeandbox.io/s/funny-einstein-deuqhi?file=/src/App.js

这是我的侧边栏。 do”链接到“\create”页面）：

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

不要在List组件中使用Link ，而是使用ListItem 、 ListItemButton和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>

创建传递给每个ListItemButton的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')
}

根据您使用的react-router版本，您推送到新页面的实际方法可能会有所不同（对于 v5 的useHistory ，对于 v6 的useNavigate等）。

Answer 2

在您链接的沙箱中，您根本没有使用抽屉中的Link组件，因此没有任何链接。

将ListItem组件渲染为Link组件并传递适当的链接道具。

例子：

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"
  }
];

对于ListItem组件，将Link组件指定为将列表项呈现为的组件，并将当前映射item的to属性传递给该组件。

<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>