如何在material-ui中将属性传递给组件，以便在ListItem标记内进行路由？
如何在material-ui中将属性传递给组件，以便在ListItem标记内进行路由？
提问于 2021-05-03 23:13:20
下面是一个代码片段：
const AppList = (props) => {
return (
<Router>
<div>
<ListItem
button
component={Link}
to="/MainComponent"
>
..
..
</ListItem>
</div>
</Router>
)
}
MainComponent路由是在起始页面中定义的，我想向该路由传递道具，有什么方法可以做到这一点吗？
Stack Overflow用户
发布于 2021-05-04 00:10:39
在我开始之前，代码取自：https://github.com/mui-org/material-ui/issues/7956
您好，您应该创建自己的组件，使用链接并将道具传递给它，如下所示：
import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { Link, LinkProps } from 'react-router-dom';
import ListItem from '@material-ui/core/ListItem';
// The usage of React.forwardRef will no longer be required for react-router-dom v6.
// see https://github.com/ReactTraining/react-router/issues/6056
const AdapterLink = React.forwardRef((props, ref) => (
<Link innerRef={ref} {...props} />
));
const CollisionLink = React.forwardRef(
(props, ref) => <Link innerRef={ref} to="/getting-started/installation/" {...props} />,
);
export default function ButtonRouter() {
return (
<Router>
<ListItem color="primary" component={AdapterLink} to="/">
Simple case
</ListItem>
<ListItem component={CollisionLink}>Avoids props collision</ListItem>
</Router>
);
}将此代码传递给它时，它将移动到模板，以便您可以像这样发送它: to={路径名：‘/ AdapterLink’，状态：{ something：'something‘}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67371388
复制相关文章
相似问题
腾讯云开发者
