How to combine ReactJs Router Link and material-ui components (like a button)?
Solution 1
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
Solution 2
This works for me:
<FlatButton label="Details"
containerElement={<Link to="/coder-details" />}
linkButton={true} />
See https://github.com/callemall/material-ui/issues/850
Solution 3
<Button
size="large"
color="primary"
onClick={() => {}}
variant="outlined"
component={RouterLink}
to={{
pathname: `enter your path name`,
}}
>
Click Here
</Button>
Solution 4
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>
);
})
Related videos on Youtube
![axel](https://i.stack.imgur.com/WOXYc.jpg?s=256&g=1)
axel
Updated on July 09, 2022Comments
-
axel almost 2 years
I need to find a solution to be able to combine together the functionality of react router with the material ui components.
For instance, I've this scenario: a router and a button. What I tried to do it is to mix them together, and restyle them.
So from a simple link
<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>{name}</Link>
I tried to create a material ui button as the following
<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}> <FlatButton label={name} /> </Link>
but I have the following error and Javascript breaks
invariant.js?4599:38Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's
render
method, or you have multiple copies of React loaded (details: https://gist.github.com/jimfb/4faa6cbfb1ef476bd105).Do you have any idea how to manage this situation? Thank you in advance and if you need more information let me know
-
Golan Kiviti almost 8 yearsI have come across this problem and with material-ui, using Link sometimes breaks the style you should you react router's browserHistory and push the url manually
-
-
JohnnyQ over 7 yearsWorks great! But how do we disable the redirect when the button is disabled?
-
cyberwombat about 6 yearsin v1 this is now
component={props => <Link to="/coder-details" {...props}/>}
-
NowNick almost 5 yearsSolution provided by @cyberwombat works great but it has caveats. You can read more here: material-ui.com/guides/composition/#caveat-with-inlining
-
Mir-Ismaili over 2 yearsThe important note is to import
Link
fromreact-router-dom
, NOT from material-ui library. That was my mistake!