How to Quickly Use a Button as a Link in React

To use a button as a link in React, wrap the button in an anchor (<a>) element. Clicking a link button will make the browser navigate to the specified URL.

JavaScript
export default function MyComponent() { return ( <div> <a href="/posts"> <button>Posts</button> </a> </div> ); }

If you’re using React Router, then wrap the button in the Link component instead, to make the browser navigate to the specified route without refreshing the page when the button is clicked.

JavaScript
import { Link } from 'react-router-dom'; export default function MyComponent() { return ( <div> <Link to="/posts"> <button>Posts</button> </Link> </div> ); }

The react-router-dom Link component renders an anchor element, so it works similarly to the first example.

We can also use custom button components as links by wrapping them with an anchor element or Link component. For example:

JavaScript
import { Link } from 'react-router-dom'; function MyCustomButton({ children }) { return <button>{children}</button>; } export default function MyComponent() { return ( <div> <Link to="/posts"> <MyCustomButton>Posts</MyCustomButton> </Link> </div> ); }

When using Material UI, we can specify a link for the Button component using the href prop.

JavaScript
import { Button } from '@mui/material'; export default function MyComponent() { return ( <div> <Button href="/posts">Posts</Button> </div> ); }

To use as a React Router Link, we can use the component prop of the Button.

JavaScript
import { Button } from '@mui/material'; import { Link } from 'react-router-dom'; export default function MyComponent() { return ( <div> <Button component={Link} to="/posts"> Posts </Button> </div> ); }

Other Material UI components like IconButton also have a component prop. Setting this prop is useful when we want the button component to inherit its color from its parent.

In this scenario, if we wrap the component with a Link, it will inherit its color from the Link instead of the intended parent. For example:

JavaScript
import { IconButton, Box, Typography } from '@mui/material'; import { Link } from 'react-router-dom'; import { Photo } from '@mui/icons-material'; export default function MyComponent() { return ( // We want the IconButton to inherit its parent color (white) <Box sx={{ backgroundColor: 'black', color: 'white', padding: 2 }}> <Typography>Lorem Ipsum</Typography> {/* But this wrapping makes it inherit from this Link */} <Link to="/photos"> <IconButton color="inherit"> <Photo /> </IconButton> </Link> </Box> ); }
The IconButton inherits its color from the Link(blue) instead of the Box (white).
The IconButton inherits its color from the Link (blue) instead of the Box (white).

We can fix this issue by setting the component prop to a Link instead of wrapping:

JavaScript
import { IconButton, Box, Typography } from '@mui/material'; import { Link } from 'react-router-dom'; import { Photo } from '@mui/icons-material'; export default function MyComponent() { return ( <Box sx={{ backgroundColor: 'black', color: 'white', padding: 2 }}> <Typography>Lorem Ipsum</Typography> {/* Setting the "component" prop to a "Link" component */} <IconButton component={Link} to="/photos" color="inherit"> <Photo /> </IconButton> </Box> ); }
The IconButton inherits its color from the Box.
The IconButton inherits its color from the Box.


Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Every Crazy Thing JavaScript Does

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *