Warning: session_start(): open(/tmp/sess_844a4798472497d203b6ba8b14e23dee, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Remove The Underline Of A Link In React - LearnShareIT

How To Remove The Underline Of A Link In React

Remove the underline of a Link in React

This article will show you how to remove the underline of a link in React. If you are looking for a solution, follow us to know how to do it. 

Link in React Router

The link component implements navigation throughout the application and creates links to various routes. It functions similarly to the HTML link tag.

Code:

import {Link} from 'react-router-dom';
export default function App() {
  return (
    <div>
     <Link to="/contact"><h1> Contact Us </h1></Link>
    </div>
  );
}

The link component uses the “to” prop to describe where the links will navigate to the contact page. In this example, the link navigates the user to the contact page.

But developers have a common problem with the link tag under the link in the interface page, and there will be a blue underline. We will come to the solutions to the above problem in the following parts of the article.

Remove the underline of a link in React

Using inline styles  

You can add inline styles to the link component to remove the link’s underline on the user screen. Let’s see the example to see how to correct the above example.

Code:

import {Link} from 'react-router-dom';
export default function App() {
  return (
    <div>
     <Link to="/contact" style={{ textDecoration: 'none' }}>
        <h1> Contact Us </h1>
     </Link>
    </div>
  );
}

So we can set the value of the text-decoration attribute to none so that the link is no longer underlined. And you have to set that value for the Link component, but if you set it for its child tags, it won’t work.

Using styled components

Attempt Block Recovery

Styled component is a library that helps you easily organize and manage CSS code in React projects. It was built to keep the style of React components tied to the components themselves. It provides a clean and easy-to-use interface for both React and React Native. 

Terminal:

npm install styled-components

Not only does it change the implementation of components in React, but it also changes how we think about styling those components.

In this method, we must install the styled-components library and follow the example below. Watch and find out how it works.

Code:

import styled from 'styled-components';
import {Link} from 'react-router-dom';
const TextLink = styled(Link)`
    text-decoration: none;
';  
export default function App() {
  return (
    <div>
     <TextLink to="/contact" >
          <h1> Contact Us </h1>
     </TextLink>
    </div>
  );
}

In the above example, we use styled components so that the case for the StyledLink tag inherits the properties of the link component. Like the first example, use the text-decoration attribute to remove the underline below the link.

Summary

To summarize, after you read this article, you can learn how to remove the underline of a link in React with two solutions: inline styles and styled components. The common point is that we all use the text-decoration property.

Maybe you are interested:

Leave a Reply

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