Search code examples
javascriptreactjsreact-routermaterial-uireact-router-dom

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

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

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