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

Question

我正在尝试按照 Mini variant drawer to make the left ListItemButton to work with React Router v6's Link element. The documentation wasn't very clear on how to achieve that with a router library. I tried several variations but could not get it to work. The CodeSandBox link from MUI is here 的 MUI 中给出的示例进行操作。有人可以告诉我如何启用 ListItemButton 以使用像 /my-path 这样的路径吗？

Answer 1

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

props

Name	Type	Default	Description
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.

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>

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

How to enable ListItemButton to use React Router v6 Link?

reactjs

react-router

material-ui

react-router-dom