How to make a React Material UI button act as a React Router Link?

Sometimes, we want to make a React Material UI button act as a React Router Link.

In this article, we’ll look at how to make a React Material UI button act as a React Router Link.

How to make a React Material UI button act as a React Router Link?

To make a React Material UI button act as a React Router Link, we can set the component prop of the Material UI Button to a React Router Link.

For instance, we write

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>

to set the Button‘s component prop to Link to render the button as a link with the to prop set as the to prop of the Link.

Conclusion

To make a React Material UI button act as a React Router Link, we can set the component prop of the Material UI Button to a React Router Link.