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

JavascriptReactjsReact RouterMaterial UiReact Router-Dom

Javascript Problem Overview

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>

Javascript Solutions

Solution 1 - Javascript

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://next.material-ui.com/guides/routing/.

Solution 2 - Javascript

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>

Solution 3 - Javascript

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>
)
Categories
Recommended Javascript Solutions
Recommended Reactjs Solutions
Recommended React Router Solutions
Recommended Material Ui Solutions
Recommended React Router-Dom Solutions

Previous Solution:

Please run `npm cache clean`

node.jsNpmIpfs

Next Solution:

Can I define the Negatable interface in Java?

JavaHaskellTypeclass

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDiogo CapelaView Question on Stackoverflow
Solution 1 - JavascriptDiogo CapelaView Answer on Stackoverflow
Solution 2 - JavascriptandromedaView Answer on Stackoverflow
Solution 3 - JavascriptPeeyush KumarView Answer on Stackoverflow