리액트 링크 태그(<Link/>)와 a태그

리액트 라우터 돔도 설치했고,

import도 해줬고,

내 VSCode에는 에러가 뜨지 않는데 

브라우저는 흰 창만 띄운다..

 

구글에 검색해보면 다

'링크 태그로 연결하세용!',

'이렇게 연결하세용!'

이래서 챗gpt한테 물어봤다.

또,

t="_blank" 및 rel="noopener noreferrer"

외부 링크는 보안과 성능을 위해

target="_blank"와 rel="noopener noreferrer"를 포함하는 것이 좋습니다.

Link로 외부 URL 연결하기 (비추천)

기술적으로는 Link에 to 속성으로 외부 URL을 지정할 수도 있지만,

권장되지 않으며 예기치 않은 동작이 발생할 수 있습니다

 

 

라고 말 했다.

 

근데 전에 a태그를 사용했고

a태그보다 Link태그를 사용하는 것이

좋다고 배워서 사용하고 싶었다.

 

그래서 튜터님한테 달려가서

'저는 잘못한게 없는데

브라우저가 자꾸 흰 창만 보여줘요..' 했다.

그러면서 개발자 도구를 보여드렸는데

아까 나왔던 오류가 그대로 뜬 듯 했다

 

내 방 인터넷이 말썽이라

그냥 무시해도 되는 오류인줄 알았는데

내가 링크 태그를 <BrouserRouter>로

감싸지 않아서 오류가 났던 것이었다.

 

 

사용 방법

1. 터미널에서 리액트 라우터 돔 추가

yarn add react-router-dom 입력

 

2. import 하기

import { Link } from "react-router-dom"

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

→ LocalMenuItem.jsx

3. 상단 컴포넌트에 <BrouserRouter>로 감싸기

 <BrowserRouter>

      <div>

        <LocalMenuItem />

        <MakeDivPlaceCenter>

          <TicketLinkLogo />

          <OpenedTicketList />

          <AutoScrollUp />

          <Footer />

        </MakeDivPlaceCenter>

      </div>

    </BrowserRouter>

→ App.jsx

 

 

사용 예)

 <RightMenus>

          <RightMenuBtn>로그인</RightMenuBtn>

          <RightMenuBtn>예매확인/취소</RightMenuBtn>

          <RightMenuBtn>회원가입</RightMenuBtn>

          <RightMenuBtn>

            <ApplyInLinkTag to="https://www.ticketlink.co.kr/help/main">

              고객센터

            </ApplyInLinkTag>

          </RightMenuBtn>

          <RightPAYCOBTn>

            <ApplyPAYCOInLinkTag to="https://www.payco.com/point/intro.nhn">

              PAYCO

            </ApplyPAYCOInLinkTag>

          </RightPAYCOBTn>

          <RightMenuBtn>관계사&nbsp;▼</RightMenuBtn>

        </RightMenus>