[React오답노트] Link 태그의 밑줄 제거하기

Header의 Navigation bar

< 목표 >
Navigation bar의 각 영역을 클릭하면 클릭한 페이지에 맞는 라우팅 처리 해 주기

Header Engine code

import { HeaderDiv, HeaderLogo, NavigationBar, ToAboutUs, ToInterpreation, ToConsulting } from "./headerStyle";
import {Link} from "react-router-dom";
function Header() {
    return (
        <HeaderDiv>
            
            <Link to="/">
                <HeaderLogo></HeaderLogo>
            </Link>

            <NavigationBar>

                <Link to="/aboutus">
                    <ToAboutUs>
                        About us
                    </ToAboutUs>
                </Link>

                <Link to="/interpretation">
                    <ToInterpreation>
                        Interpreation
                    </ToInterpreation>
                </Link>

                <Link to="/consulting">
                    <ToConsulting>
                        Consulting
                    </ToConsulting>
                </Link>
            </NavigationBar>
        </HeaderDiv>
    )
}

export default Header

Header style code

import styled from "styled-components";
// How to import img from outside
import headerLogo from "../resources/images/common/logo.jpeg"
export const HeaderDiv = styled.div`
    
`;

export const HeaderLogo = styled.div`
    
    height: 150px;
    width: 300px;
    margin:0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    // how to set background Img by using styled-components
    background-image: url(${headerLogo});
    background-repeat: no-repeat;
    background-size: contain;
`;

export const NavigationBar = styled.div`
    
    width: 100%;
    border-top: 3px solid #A67951;
    border-bottom: 3px solid #A67951;

    display: flex;
    justify-content: space-around;

    /* This means <Link> */
    a { 

        width:15%;
        display: block;

        text-align: center;
        text-decoration: none;
        font-size: 25px;
        color: #000;
        
        transition: 1s;
    }

    a:hover{
        background-color: #A67951;
        color: #fff;
        border-radius: 10px;
    }

`;

export const ToAboutUs = styled.p`
    
`;

export const ToInterpreation = styled.p`
    
`;

export const ToConsulting = styled.p`
    
`;

문제의 발생

styled component를 이용하여 <Link> 태그의 밑줄을 제거하려 했으나

아무리 text-decoration : none 속성을 먹여봐도 밑줄이 제거되지 않았다.

해결 방안

신기하게 color 속성은 먹는 것을 보아,

이건 분명 뭔가 다른 태그로 대체되어 있는거다 라는 합리적 의심이 생겼고,

라우팅을 해 주려면 <a> 태그가 아닐 까 실험 해 보았는데, 성공했다.

해결 코드

export const NavigationBar = styled.div`
    
    width: 100%;
    border-top: 3px solid #A67951;
    border-bottom: 3px solid #A67951;

    display: flex;
    justify-content: space-around;

    /* This means <Link> */
    a { 

        width:15%;
        display: block;

        text-align: center;
        text-decoration: none;
        font-size: 25px;
        color: #000;
        
        transition: 1s;
    }

    a:hover{
        background-color: #A67951;
        color: #fff;
        border-radius: 10px;
    }

`;