我正在尝试按照MUI的Mini variant drawer示例的做法,使用React Router v6的Link元素使左侧的ListItemButton
可用。文档没有清楚说明如何在路由库中实现这一点。我尝试了几种不同的方式,但都无法使其正常工作。MUI的CodeSandBox链接在这里。请问有人可以告诉我如何启用ListItemButton
来处理类似于/my-path
这样的路径吗?
我正在尝试按照MUI的Mini variant drawer示例的做法,使用React Router v6的Link元素使左侧的ListItemButton
可用。文档没有清楚说明如何在路由库中实现这一点。我尝试了几种不同的方式,但都无法使其正常工作。MUI的CodeSandBox链接在这里。请问有人可以告诉我如何启用ListItemButton
来处理类似于/my-path
这样的路径吗?
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>
interface MyListItemButtonLinkProps extends ListItemButtonProps { to: To } function MyListItemButtonLink({children, to, ...props}: PropsWithChildren) {
return (
{children}
)
}```
这个方法虽然可行,但在Webstorm中会给我带来大量的TypeScript错误。
- Jaap