如何启用 ListItemButton 使用 React Router v6 Link？

Question

我正在尝试遵循 MUI 的Mini 变体抽屉中给出的示例，使左侧ListItemButton能够与 React Router v6 的 Link 元素一起使用。该文档对于如何使用路由器库实现这一目标不是很清楚。我尝试了几种变体但无法使其工作。MUI 的 CodeSandBox 链接位于此处。有人可以告诉我如何启用ListItemButton像这样的路径/my-path吗？

Answer 1

从导入Link组件react-router-dom并作为 的component传递ListItemButton。

道具

姓名	类型	默认	描述
成分	元素类型		用于根节点的组件。使用 HTML 元素或组件的字符串。

import { Link } from 'react-router-dom';

...

<List>
  {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
    <ListItemButton
      key={text}
      component={Link} // <-- pass Link as component
      to={... pass a target path ...}
      sx={{
        minHeight: 48,
        justifyContent: open ? 'initial' : 'center',
        px: 2.5,
      }}
    >
      <ListItemIcon
        sx={{
          minWidth: 0,
          mr: open ? 3 : 'auto',
          justifyContent: 'center',
        }}
      >
        {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
      </ListItemIcon>
      <ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
    </ListItemButton>
  ))}
</List>