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

Question

我尝试用 封装我的 ListItem 组件，但它不起作用，我也尝试使用历史选项，但这让我感到困惑。 我的代码沙箱:
codesandbox.io/s/funny-einstein-deuqhi?file=/src/App.js

这是我的 sidebar.js(没有 mixin&drawerheader 等的所有导入和创建，应用程序栏上到我的 createsite 的链接有效，我希望我的侧边栏列表项也有相同的效果。我希望我的列表项带有文本 。”添加待办事项”以链接到“\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

在您链接的沙箱中，您根本没有使用抽屉中的 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>