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

Question

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

这是我的 sidebar.js（没有所有导入和 mixin&drawerheader 和 co 的创建，我的 createsite 应用栏上的 link 作品，我想要我的边栏列表项也一样。我希望我的列表项带有文本“添加待办事项”到 link 到“\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 版本，推送到新页面的实际方法可能会有所不同（useHistory 用于 v5，useNavigate 用于 v6，等等。 ).

Answer 2

在您 linked 的沙盒中，您根本没有在抽屉中使用 Link 组件，因此没有任何内容被 linked 到。

将 ListItem 组件 呈现为 一个 Link 组件并传递适当的 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>

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

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

reactjs

react-router

material-ui

sidebar