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

Question

我正在尝试按照MUI的Mini variant drawer示例的做法，使用React Router v6的Link元素使左侧的ListItemButton可用。文档没有清楚说明如何在路由库中实现这一点。我尝试了几种不同的方式，但都无法使其正常工作。MUI的CodeSandBox链接在这里。请问有人可以告诉我如何启用ListItemButton来处理类似于/my-path这样的路径吗？

- Niner

Answer 1

从 react-router-dom 导入 Link 组件，并将其作为 ListItemButton 的 component 属性进行传递。 props

属性名称	类型	默认值	描述
component	elementType		用于根节点的组件。可以是一个 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>

- Drew Reese

---

非常感谢。我想我最初尝试了那段代码，但是vscode给了我很多红色下划线，所以我放弃了。现在它就可以工作了。你的例子真的帮了我很多。 - Niner

@Niner 欢迎。我刚刚fork了MUI演示沙盒。它使用TypeScript，所以如果您将代码复制/粘贴到非TypeScript项目中可能会有问题。不管怎样，很高兴能帮助你。干杯。 - Drew Reese

有没有办法创建一个函数组件来包装这个功能？ - Jaap

@Jaap，您能澄清一下您想要“用函数组件包装”的this是什么吗？ - Drew Reese

我遇到了一个问题，类似于function MyListItemButtonLink() {}的东西会给出可怕的TypeScript错误。 interface MyListItemButtonLinkProps extends ListItemButtonProps { to: To } function MyListItemButtonLink({children, to, ...props}: PropsWithChildren) { return ( {children} ) }``` 这个方法虽然可行，但在Webstorm中会给我带来大量的TypeScript错误。 - Jaap

@Jaap 是错误还是警告？听起来你可能只需要“微调”一下属性签名。这会更适合在Stackoverflow上发布新帖子，因为它与本帖有点偏题，但你当然可以在任何新帖子中引用这个帖子/答案。如果你决定为这个新问题创建一个帖子，请随时在这里通过链接向我发送，我可以在有空时查看。如果有什么问题，你很可能不仅仅会得到我的回复，因为人们并不会在已经被回答的帖子评论中寻找问题来回答。 - Drew Reese