How to get rid of underline for Link component of React Router?

If you’ve been working with React Router, you may have noticed that the Link component automatically adds an underline to the text. While this may be the default behavior, it’s not always desired. In this blog post, we’ll explore a couple of solutions to remove the underline from the Link component in React Router.

Solution 1: Using CSS

The simplest way to remove the underline is by using CSS. We can target the Link component and set the text-decoration property to none.

.link { text-decoration: none; }

Apply the “link” class to your Link component to remove the underline:

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

function App() { return ( Home ); }

Solution 2: Overriding the Link component

If you prefer to override the Link component itself, you can create a custom Link component and apply the desired styles.

import { Link as RouterLink } from 'react-router-dom'; import { withStyles } from '@material-ui/core/styles';


const Link = withStyles({

  root: {

    textDecoration: 'none',

  },

})(RouterLink);

function App() { return ( Home ); }

In this example, we use the withStyles higher-order component from Material-UI to apply the custom styles to the Link component. You can adjust the styles to match your specific needs.

With these solutions, you can easily remove the underline from the Link component in React Router. Choose the approach that best fits your project requirements and style preferences.

That’s it! You’ve successfully learned how to get rid of the underline for the Link component of React Router. Happy coding!

How to get rid of underline for Link component of React Router?