我需要找到一个解决方案,以便能够将反应路由器的功能与材料ui组件结合在一起。
例如,我有这种情况:路由器和按钮。我试图做的是将它们混合在一起,并重新安置它们。
所以从一个简单的链接
<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>{name}</Link>
我尝试创建一个素材ui按钮,如下所示
<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>
<FlatButton label={name} />
</Link>
但我有以下错误和Javascript中断
invariant.js?4599:38 Uncaught Invariant Violation:addComponentAsRefTo(...):只有ReactOwner可以有refs。您可能正在向未在组件的
render
方法内创建的组件添加引用,或者您已加载多个React副本(详细信息:POST policies)。
你知道如何管理这种情况吗? 提前感谢您,如果您需要更多信息,请告诉我们
答案 0 :(得分:3)
<Button
size="large"
color="primary"
onClick={() => {}}
variant="outlined"
component={RouterLink}
to={{
pathname: `enter your path name`,
}}
>
Click Here
</Button>
答案 1 :(得分:2)
这对我有用:
<FlatButton label="Details"
containerElement={<Link to="/coder-details" />}
linkButton={true} />
答案 2 :(得分:2)
在新版本中执行的方法是:
import { Link } from 'react-router-dom';
// ... some code
render(){
return (
<Button component={Link} to={'/my_route'}>My button</Button>
);
}
答案 3 :(得分:1)
使用打字稿时,您可以尝试以下方式:
import { NavLink as RouterLink } from "react-router-dom";
import {
Button,
Collapse,
ListItem,
makeStyles,
ListItemIcon,
ListItemText,
} from "@material-ui/core";
type NavItemProps = {
className?: string;
depth: number;
href?: string;
icon?: any;
info?: any;
open?: boolean;
title: string;
};
const NavItem: React.SFC<NavItemProps> = ({
const CustomLink = React.forwardRef((props: any, ref: any) => (
<NavLink
{...props}
style={style}
to={href}
exact
ref={ref}
activeClassName={classes.active}
/>
));
return (
<ListItem
className={clsx(classes.buttonLeaf, `depth-${depth}`)}
disableGutters
style={style}
key={title}
button
component={CustomLink}
{...rest}
>
<ListItemIcon>
{Icon && <Icon className={classes.icon} size="20" />}
</ListItemIcon>
<ListItemText primary={title} className={classes.title} />
</ListItem>
);
})