Ang pangunahing problema na nauugnay sa mga panlabas na link ng React Router ay maaari silang magdulot ng hindi inaasahang pag-uugali kapag nagna-navigate sa pagitan ng iba't ibang mga pahina. Halimbawa, kung ang isang user ay nag-click sa isang panlabas na link habang nasa isang pahina ng React Router, ang browser ay magna-navigate palayo sa kasalukuyang pahina sa halip na mag-ruta sa bagong pahina sa loob ng application. Maaari itong humantong sa pagkalito at pagkabigo para sa mga user na umaasa ng maayos na paglipat sa pagitan ng mga pahina. Bukod pa rito, ang mga panlabas na link ay maaari ding magdulot ng mga isyu sa SEO dahil maaaring hindi maayos na mai-index ng mga search engine ang nilalaman mula sa mga panlabas na mapagkukunan.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Ini-import ng linyang ito ang bahagi ng Link mula sa library ng react-router-dom.
2. Lumilikha ang linyang ito ng elemento ng link na magre-redirect sa “https://www.example.com” kapag na-click, at buksan ito sa isang bagong tab na walang impormasyon ng referrer na ipinadala sa bagong pahina. Ang text ng link ay magiging “External Link”.
Ano ang isang panlabas na link
Ang isang panlabas na link sa React Router ay isang link na magdadala sa user sa isang pahina sa labas ng application. Ito ay maaaring isang panlabas na website, o isa pang application. Ang mga panlabas na link ay ginagamit upang magbigay sa mga user ng karagdagang impormasyon o mga mapagkukunan na nauugnay sa nilalaman sa loob ng application. Magagamit din ang mga ito bilang isang paraan upang idirekta ang mga user sa iba pang mga application o website para sa karagdagang paggalugad.
Paano magdagdag ng panlabas na link gamit ang React Router
Ang pagdaragdag ng panlabas na link sa React Router sa React Router ay isang tapat na proseso. Una, kailangan mong i-import ang bahagi ng Link mula sa react-router-dom package. Pagkatapos, maaari mong gamitin ang bahagi ng Link upang lumikha ng isang link sa isang panlabas na URL. Ang syntax para sa paglikha ng isang link ay ganito ang hitsura:
Halimbawa, kung gusto mong lumikha ng isang link sa Google, magiging ganito ang hitsura:
Kapag nagawa mo na ang iyong link, maaari kang magdagdag ng mga karagdagang props gaya ng mga katangian ng target at rel para sa mas mahusay na accessibility at mga layunin ng seguridad. Halimbawa:
