60

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

1
  • I 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 Sep 11, 2016 at 19:16

5 Answers 5

123

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

1
  • 5
    The important note is to import Link from react-router-dom, NOT from material-ui library. That was my mistake! Oct 18, 2021 at 16:17
7

This works for me:

<FlatButton label="Details" 
            containerElement={<Link to="/coder-details" />} 
            linkButton={true} />

See https://github.com/callemall/material-ui/issues/850

3
  • Works great! But how do we disable the redirect when the button is disabled?
    – JohnnyQ
    Feb 1, 2017 at 3:07
  • 10
    in v1 this is now component={props => <Link to="/coder-details" {...props}/>} Apr 2, 2018 at 15:46
  • Solution provided by @cyberwombat works great but it has caveats. You can read more here: material-ui.com/guides/composition/#caveat-with-inlining
    – NowNick
    Jul 31, 2019 at 11:44
6
<Button
          size="large"
          color="primary"
          onClick={() => {}}
          variant="outlined"
          component={RouterLink}
          to={{
            pathname: `enter your path name`,
          }}
        >
          Click Here
        </Button>
2

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>
  );
})


0

Material UI button as React Router link To use as a React Router Link, you can use the component prop of the Button.

import { Button } from '@mui/material';
import { Link } from 'react-router-dom';

export default function MyComponent() {
  return (
    <div>
      <Button component={Link} to="/posts">
        Posts
      </Button>
    </div>
  );
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.