How to combine ReactJs Router Link and material-ui components (like a button)?

Question

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

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 — Golan Kiviti, Sep 11 '16 at 19:16

UselesssCat · Accepted Answer · 2019-12-05T03:36:37.123

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

edited Dec 05 '19 at 03:36

answered Dec 05 '19 at 03:29

UselesssCat

2,248
4
20
35

5

The important note is to **import `Link` from `react-router-dom`, NOT from material-ui library**. That was my mistake! – Mir-Ismaili Oct 18 '21 at 16:17

score 7 · Answer 2 · answered Sep 11 '16 at 16:57

7

This works for me:

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

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

answered Sep 11 '16 at 16:57

Jeff Ogata

56,645
19
114
127

Works great! But how do we disable the redirect when the button is disabled? – JohnnyQ Feb 01 '17 at 03:07
10

in v1 this is now `component={props => }` – cyberwombat Apr 02 '18 at 15:46
Solution provided by @cyberwombat works great but it has caveats. You can read more here: https://material-ui.com/guides/composition/#caveat-with-inlining – NowNick Jul 31 '19 at 11:44

score 6 · Answer 3 · answered May 01 '20 at 18:37

<Button
          size="large"
          color="primary"
          onClick={() => {}}
          variant="outlined"
          component={RouterLink}
          to={{
            pathname: `enter your path name`,
          }}
        >
          Click Here
        </Button>

Amarshan · Answer 4 · 2020-05-11T18:49:47.943

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

score 0 · Answer 5 · answered Jun 21 '23 at 09:02

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

How to combine ReactJs Router Link and material-ui components (like a button)?

5 Answers5