How to Quickly Use a Button as a Link in React

Tari Ibaba
Last updated on August 27, 2023
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.

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.

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:

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.

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.

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:

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:

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.
Coding Beauty Assistant logo

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

See also