How to make a Material UI react Button act as a react-router-dom Link?

Question

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>

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

score 159 · Accepted Answer · edited Oct 13 '22 at 00:11

159

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>

You can find more details at https://mui.com/material-ui/guides/routing/.

edited Oct 13 '22 at 00:11

Christos Lytras

36,310
4
80
113

answered Aug 01 '18 at 21:41

Diogo Capela

5,669
5
24
35

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
4

Looks like this is quite a bit different now in MUI 5 release. https://mui.com/guides/routing/ – brandonscript Oct 02 '21 at 04:52

score 31 · Answer 2 · answered Oct 19 '21 at 17:13

31

MUI 5 has simplified this even further. Simply provide a MUI Button with a href attribute as follows:

import Button from '@mui/material/Button';


<Button href="/" variant="contained">
  Link
</Button>

answered Oct 19 '21 at 17:13

andromeda

4,433
5
32
42

1

This should be a selected answer. Thanks. – marko424 Oct 19 '22 at 09:28
4

This don't use react-router Link component. It use 'a' html component that is the default one. – Maiky Feb 16 '23 at 09:00
3

@Maiky The default component used for the `Button` when supplying an `href` property is an anchor ``. However, you can specify what component to use with the property `LinkComponent`, for example `LinkComponent={Link}` . – Bro3Simon May 17 '23 at 16:19

score 13 · Answer 3 · answered Aug 01 '18 at 21:41

13

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

answered Aug 01 '18 at 21:41

Peeyush Kumar

723
6
10

2

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
4

A Button inside of a Link is not valid HTML (see also https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5) and even if parsable by browsers, its poor semantics and causes a11y problems. – filoxo Jul 12 '22 at 03:51

Isuru Bandara · Answer 4 · 2023-05-12T05:21:30.737

0

This way worked for me

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

const YourComponentName = () =>{

    const history = useHistory();
    const handleRoutes = (path) =>{
       history.push(path)
    }
    
  return(
    <>
      ...
      <Button 
         variant="contained" 
         color="primary" 
         onClick={() => handleRoutes('/about')}>
         About Page
      </Button>
      ...
    </>
)
}

edited May 12 '23 at 05:21

answered Jun 07 '22 at 10:32

Isuru Bandara

31
4

It will not behave the same as link, e.g.: you cannot click mouse wheel to open link in another tab. I would not recommend this approach as it may result in poor UX. – Mantas Giniūnas Apr 04 '23 at 13:29

How to make a Material UI react Button act as a react-router-dom Link?

4 Answers4

Linked