How to combine ReactJs Router Link and material-ui components (like a button)?
This works for me:
<FlatButton label="Details"
containerElement={<Link to="/coder-details" />}
linkButton={true} />
See https://github.com/callemall/material-ui/issues/850
<Button
size="large"
color="primary"
onClick={() => {}}
variant="outlined"
component={RouterLink}
to={{
pathname: `enter your path name`,
}}
>
Click Here
</Button>
The way to do in new versions is:
import { Link } from 'react-router-dom';
// ... some code
render(){
return (
<Button component={Link} to={'/my_route'}>My button</Button>
);
}
Look at this thread or this question
You can try this way when using typescript:
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>
);
})