33

How can I make a Material UI react Button component act as a Link component from react-router-dom without losing it's original style? Like changing the route on click.

import Button from '@material-ui/core/Button';

<Button variant="contained" color="primary">
    About Page
</Button>

To something like this, but maintaining the original Button style:

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

<Button variant="contained" color="primary">
    <Link to="/about">
        About Page
    </Link>
</Button>
Diogo Capela
  • 2,683
  • 2
  • 18
  • 29
  • Possible duplicate of [Material-ui adding Link component from react-router](https://stackoverflow.com/questions/37843495/material-ui-adding-link-component-from-react-router) – Tholle Aug 01 '18 at 21:46

2 Answers2

76

Okay, this is very easy, I don't know why it was not working with me:

Just do like this:

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

<Button component={ Link } to="/about" variant="contained" color="primary">
    About Page
</Button>
Diogo Capela
  • 2,683
  • 2
  • 18
  • 29
  • how to specify more attribute like `exact` for `Link`? – Tin Dec 06 '19 at 14:39
  • This is going beyond the scope of this question, but anyway to make this dynamic? Say I do not pass a link prop, don't use `component={ Link }` – Riza Khan Mar 07 '21 at 15:12
6

You need to wrap the <Button /> inside the <Link /> component.

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

const ButtonWithLink = () => (
  <Link to="/about">
   <Button variant="contained" color="primary">
     About Page
   </Button>
  </Link>
)
Peeyush Kumar
  • 599
  • 5
  • 9
  • this way also works. just need to give styling to remove underline from `Link`. Thanks – Valay Aug 03 '19 at 16:52
  • This was extremely helpful for a problem I was having where I have a wrapper for `Link` and so the `component={Link}` method resulted in lost styling from Material-UI for some reason. This method restored the styling. – c_sagan Dec 16 '19 at 16:56