React Router 외부 링크와 관련된 주요 문제는 서로 다른 페이지 사이를 탐색할 때 예기치 않은 동작을 유발할 수 있다는 것입니다. 예를 들어 사용자가 React Router 페이지에 있는 동안 외부 링크를 클릭하면 브라우저는 애플리케이션 내의 새 페이지로 라우팅하는 대신 현재 페이지에서 다른 곳으로 이동합니다. 이는 페이지 간 원활한 전환을 기대하는 사용자에게 혼란과 좌절을 초래할 수 있습니다. 또한 외부 링크는 검색 엔진이 외부 소스의 콘텐츠를 제대로 인덱싱하지 못할 수 있으므로 SEO에 문제를 일으킬 수 있습니다.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. 이 줄은 react-router-dom 라이브러리에서 링크 구성 요소를 가져옵니다.
2. 이 줄은 클릭 시 "https://www.example.com"으로 리디렉션되는 링크 요소를 생성하고 새 페이지로 전송된 리퍼러 정보 없이 새 탭에서 엽니다. 링크 텍스트는 "외부 링크"입니다.
외부링크란?
React Router의 외부 링크는 사용자를 애플리케이션 외부 페이지로 이동시키는 링크입니다. 이것은 외부 웹사이트 또는 다른 애플리케이션일 수 있습니다. 외부 링크는 애플리케이션 내의 콘텐츠와 관련된 추가 정보 또는 리소스를 사용자에게 제공하는 데 사용됩니다. 또한 추가 탐색을 위해 사용자를 다른 응용 프로그램이나 웹 사이트로 안내하는 방법으로도 사용할 수 있습니다.
React Router로 외부 링크를 추가하는 방법
React Router에서 React Router로 외부 링크를 추가하는 것은 간단한 프로세스입니다. 먼저 react-router-dom 패키지에서 Link 구성 요소를 가져와야 합니다. 그런 다음 링크 구성 요소를 사용하여 외부 URL에 대한 링크를 만들 수 있습니다. 링크 생성 구문은 다음과 같습니다.
예를 들어 Google에 대한 링크를 만들려면 다음과 같이 표시됩니다.
구글
링크를 만든 후에는 더 나은 접근성 및 보안 목적을 위해 target 및 rel 속성과 같은 추가 소품을 추가할 수 있습니다. 예를 들어:
구글
