How to use a button in a link in react?

To use a button in a link in React, you can use the Link component provided by the react-router-dom library. This allows you to create a link that navigates to a new page or route when clicked, while also using a button to trigger the navigation. Here’s an example:

import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <Link to="/my-route">
      <button>Go to My Route</button>
    </Link>
  );
}

In this example, we first import the Link component from react-router-dom. Then, we use the Link component as the container for our button, setting its to prop to the desired route we want to navigate to when the button is clicked. Inside the Link, we render our button with the desired text or icon.

When the button is clicked, the Link component will handle the navigation to the specified route, without causing a full page refresh.