React Routeri välislinkidega seotud peamine probleem on see, et need võivad erinevate lehtede vahel navigeerimisel põhjustada ootamatut käitumist. Näiteks kui kasutaja klõpsab React Routeri lehel välisel lingil, navigeerib brauser praeguselt lehelt eemale, selle asemel et suunata rakenduses uuele lehele. See võib tekitada segadust ja pettumust kasutajatele, kes ootavad sujuvat üleminekut lehtede vahel. Lisaks võivad välised lingid põhjustada probleeme SEO-ga, kuna otsingumootorid ei pruugi olla võimelised välistest allikatest pärinevat sisu korralikult indekseerima.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. See rida impordib linki komponendi react-router-dom teegist.
2. See rida loob lingielemendi, mis suunab klõpsamisel ümber aadressile https://www.example.com ja avab selle uuel vahelehel, ilma et uuele lehele viiteteavet saadetaks. Lingi tekst on "Väline link".
Mis on väline link
React Routeri väline link on link, mis viib kasutaja rakendusest väljapoole jäävale lehele. See võib olla väline veebisait või mõni muu rakendus. Väliseid linke kasutatakse kasutajatele rakenduse sisuga seotud lisateabe või ressursside pakkumiseks. Neid saab kasutada ka kasutajate suunamiseks teistele rakendustele või veebisaitidele edasiseks uurimiseks.
Kuidas lisada React Routeriga välist linki
Välise lingi lisamine React Routerisse React Routeris on lihtne protsess. Esiteks peate importima komponendi Link paketist react-router-dom. Seejärel saate komponendi Link kasutada välise URL-i lingi loomiseks. Lingi loomise süntaks näeb välja selline:
Näiteks kui soovite luua Google'i lingi, näeks see välja järgmine:
Kui olete lingi loonud, saate parema juurdepääsetavuse ja turvalisuse huvides lisada täiendavaid rekvisiite, nagu siht- ja rel-atribuudid. Näiteks:
