React Router — 외부 URL로 리디렉션

Link 구성 요소 또는 HTML 앵커 태그( <a> ) 덕분에 React Router를 사용하여 외부 URL에 연결하는 방법을 알아보십시오.

React Router로 외부 링크를 추가하는 방법은 무엇입니까?

React Router를 사용하여 외부 링크로 리디렉션하려면 Link 구성 요소 또는 HTML 앵커 태그를 사용할 수 있습니다. <Link> 구성 요소를 사용하면 pathname 및 target 매개 변수 덕분에 수행할 수 있습니다. 사용자를 지정된 URL로 리디렉션합니다.

반응 라우터 사용

React에서 React Router은 애플리케이션 라우팅(다중 페이지 애플리케이션)을 관리하는 데 가장 많이 사용되는 라이브러리입니다. 그들이 제공하는 일련의 기능과 구성 요소 덕분에 많은 기능을 구축할 수 있습니다.

이 라이브러리를 사용하여 외부 URL로 리디렉션하는 경우 <Link /> 및 pathname 속성과 함께 target 구성 요소를 사용할 수 있습니다.

새 탭에서 the HereWeCode homepage을 여는 방법을 알아보겠습니다.

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom"
import "./styles.css";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

function Home() {
  return (
    <div>
      <Link to={{ pathname: "https://herewecode.io/" }} target="_blank">Click to open HereWeCode (new tab)</Link>
    </div>
  )
}

위에서 볼 수 있듯이 외부 URL을 React RouterLink 구성 요소에 전달하고 이를 target="_blank" 속성과 결합하면 링크가 선택한 URL로 새 탭이 열립니다.

Note: Unfortunately, it's impossible to open an external URL in the same tab using React Router. If you don't provide the target property, the router will append the URL to your current website URL (e.g., https://my-website.com/https://herewecode.io/). In the next section, I'll show you how to open an external link in the current tab.

앵커 태그 사용( )

현재 탭에 대한 외부 링크를 열려면 가장 간단한 방법은 HTML의 기본 앵커 태그를 사용하는 것입니다( <a> ).

방법은 다음과 같습니다.

import React from "react"

export default function App() {
  return (
    <div>
      <p>
        <a href="https://herewecode.io/">
          Click to open HereWeCode (current tab)
        </a>
      </p>
      <p>
        <a href="https://herewecode.io/" target="_blank">
          Click to open HereWeCode (new tab)
        </a>
      </p>
    </div>
  )
}

알다시피 외부 링크를 href 속성에 전달합니다. target="_blank" 속성이 제공되지 않으면 링크가 현재 탭에서 열립니다. 그렇지 않으면 새 탭에서.



React에 대해 자세히 알아보려면 how to get URL params in React(React Router V5/V6 포함 및 미포함)에 대한 기사를 참조하십시오.


읽어 주셔서 감사합니다. 연결하자!

➡️ 웹 개발로 성장할 수 있도록 돕고 Nomad 소프트웨어 엔지니어로서의 여정을 공유합니다. 🚀🎒