Glavna težava, povezana z zunanjimi povezavami React Router, je, da lahko povzročijo nepričakovano vedenje pri krmarjenju med različnimi stranmi. Na primer, če uporabnik klikne zunanjo povezavo, medtem ko je na strani React Router, bo brskalnik zapustil trenutno stran, namesto da bi se usmeril na novo stran v aplikaciji. To lahko povzroči zmedo in frustracije pri uporabnikih, ki pričakujejo nemoten prehod med stranmi. Poleg tega lahko zunanje povezave povzročajo tudi težave pri SEO, saj iskalniki morda ne bodo mogli pravilno indeksirati vsebine iz zunanjih virov.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Ta vrstica uvozi komponento Link iz knjižnice react-router-dom.
2. Ta vrstica ustvari element povezave, ki bo ob kliku preusmerjen na »https://www.example.com« in ga odprl v novem zavihku brez podatkov o napotitelju, poslanih na novo stran. Besedilo povezave bo »Zunanja povezava«.
Kaj je zunanja povezava
Zunanja povezava v React Routerju je povezava, ki uporabnika vodi na stran zunaj aplikacije. To je lahko zunanje spletno mesto ali druga aplikacija. Zunanje povezave se uporabljajo za zagotavljanje dodatnih informacij ali virov, povezanih z vsebino v aplikaciji, uporabnikom. Uporabljajo se lahko tudi kot način za usmerjanje uporabnikov na druge aplikacije ali spletna mesta za nadaljnje raziskovanje.
Kako dodati zunanjo povezavo z React Routerjem
Dodajanje zunanje povezave z React Router v React Router je preprost postopek. Najprej morate uvoziti komponento povezave iz paketa react-router-dom. Nato lahko s komponento povezave ustvarite povezavo do zunanjega URL-ja. Sintaksa za ustvarjanje povezave izgleda takole:
Če bi na primer želeli ustvariti povezavo do Googla, bi to izgledalo takole:
Ko ustvarite povezavo, lahko dodate dodatne pripomočke, kot sta atributa target in rel, za boljšo dostopnost in varnost. Na primer:
