Stripping Away the Underline: Multiple Approaches to Style React Router Links

• By default, anchor tags (<a>) in HTML, which is what the Link component renders under the hood, have an underline to visually indicate that they are clickable links.

Removing the Underline:

There are several ways to achieve this in React Router:

1. Inline Styles:

   This approach directly sets the text-decoration property to none on the Link component:

   import { Link } from 'react-router-dom';
   
   function MyLink() {
     return (
       <Link to="/" style={{ textDecoration: 'none' }}>Home</Link>
     );
   }
   

   While this works, it can become cumbersome to manage styles directly within JSX for multiple links.

2. CSS Classes:

   • Create a CSS class that targets the Link component using its default class name (MuiLink-root in Material-UI or a custom class you define).
   • Set text-decoration: none in the CSS class.
   • Apply the class to the Link component:

   import { Link } from 'react-router-dom';
   
   function MyLink() {
     return (
       <Link to="/" className="my-link">Home</Link>
     );
   }
   
   // In your CSS file (or a styled-components block)
   .my-link {
     text-decoration: none;
   }
   

   This approach is more maintainable as you can reuse the CSS class for multiple links.

3. Styled Components (if using a library like styled-components):

   • Create a styled component that wraps the Link component.
   • Set text-decoration: none within the styled component's styles.

   import styled from 'styled-components';
   import { Link } from 'react-router-dom';
   
   const StyledLink = styled(Link)`
     text-decoration: none;
   `;
   
   function MyLink() {
     return (
       <StyledLink to="/">Home</StyledLink>
     );
   }
   

   This method offers a more concise and component-based approach to styling your links.

4. Material-UI (v5+):

   If you're using Material-UI, the Link component provides a underline prop that you can set to "none":

   import { Link as MuiLink } from '@material-ui/core';
   
   function MyLink() {
     return (
       <MuiLink to="/" underline="none">Home</MuiLink>
     );
   }
   

Choosing the Right Approach:

The best method depends on your project's structure, styling preferences, and familiarity with different styling techniques. Inline styles might be suitable for quick one-off changes, while CSS classes or styled components offer more maintainability and reusability for larger applications. Material-UI's built-in prop is convenient if you're already using the library.

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

function MyLink() {
  return (
    <Link to="/" style={{ textDecoration: 'none' }}>Home</Link>  // Underline removed
  );
}

JavaScript (Link component):

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

function MyLink() {
  return (
    <Link to="/" className="my-link">Home</Link>  // Apply custom class
  );
}

CSS File:

.my-link {
  text-decoration: none;  // Remove underline
}

Styled Components (using styled-components):

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

const StyledLink = styled(Link)`
  text-decoration: none;  // Remove underline
`;

function MyLink() {
  return (
    <StyledLink to="/">Home</StyledLink>
  );
}

import { Link as MuiLink } from '@material-ui/core';

function MyLink() {
  return (
    <MuiLink to="/" underline="none">Home</MuiLink>  // Set underline prop to "none"
  );
}

You can leverage pseudo-classes within your CSS class to target specific link states like hover or focus and remove the underline only in those scenarios. This can be useful if you want to maintain an underline on hover for visual feedback:

.my-link {
  text-decoration: none;
}

.my-link:hover,
.my-link:focus {
  /* Add hover or focus styles here, but keep text-decoration: none; */
}

Conditional Rendering (for dynamic styling):

If you need to conditionally remove the underline based on some state or prop, you can use conditional rendering:

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

function MyLink({ removeUnderline }) {
  const linkStyle = removeUnderline ? { textDecoration: 'none' } : {};

  return (
    <Link to="/" style={linkStyle}>Home</Link>
  );
}

CSS Modules (if using a module bundler):

If your project uses a module bundler that supports CSS Modules (like Webpack), you can create scoped CSS classes specific to your component, improving encapsulation and avoiding naming conflicts:

import { Link } from 'react-router-dom';
import styles from './MyLink.module.css'; // Import the generated CSS module

function MyLink() {
  return (
    <Link to="/" className={styles.link}>Home</Link>
  );
}

// MyLink.module.css
.link {
  text-decoration: none;
}