Principala problemă legată de legăturile externe React Router este că acestea pot provoca un comportament neașteptat atunci când navigați între diferite pagini. De exemplu, dacă un utilizator dă clic pe un link extern în timp ce se află pe o pagină React Router, browserul va naviga departe de pagina curentă în loc să direcționeze către pagina nouă din aplicație. Acest lucru poate duce la confuzie și frustrare pentru utilizatorii care se așteaptă la o tranziție lină între pagini. În plus, linkurile externe pot cauza probleme cu SEO, deoarece motoarele de căutare ar putea să nu poată indexa corect conținutul din surse externe.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Această linie importă componenta Link din biblioteca react-router-dom.
2. Această linie creează un element de link care va redirecționa către „https://www.example.com” atunci când se face clic și îl va deschide într-o filă nouă, fără informații de referință trimise către noua pagină. Textul linkului va fi „Link extern”.
Ce este un link extern
Un link extern în React Router este un link care duce utilizatorul la o pagină din afara aplicației. Acesta ar putea fi un site web extern sau o altă aplicație. Legăturile externe sunt folosite pentru a oferi utilizatorilor informații sau resurse suplimentare legate de conținutul din aplicație. Ele pot fi, de asemenea, folosite ca o modalitate de a direcționa utilizatorii către alte aplicații sau site-uri web pentru explorare ulterioară.
Cum să adăugați o legătură externă cu React Router
Adăugarea unei legături externe cu React Router în React Router este un proces simplu. Mai întâi, trebuie să importați componenta Link din pachetul react-router-dom. Apoi, puteți utiliza componenta Link pentru a crea un link către o adresă URL externă. Sintaxa pentru crearea unui link arată astfel:
De exemplu, dacă doriți să creați un link către Google, ar arăta astfel:
Odată ce ați creat linkul, puteți adăuga elemente de recuzită suplimentare, cum ar fi atributele target și rel, pentru o mai bună accesibilitate și securitate. De exemplu:
