Hovedproblemet knyttet til React Router eksterne lenker er at de kan forårsake uventet oppførsel når du navigerer mellom forskjellige sider. For eksempel, hvis en bruker klikker på en ekstern lenke mens han er på en React Router-side, vil nettleseren navigere bort fra gjeldende side i stedet for å rute til den nye siden i applikasjonen. Dette kan føre til forvirring og frustrasjon for brukere som forventer en jevn overgang mellom sider. I tillegg kan eksterne lenker også forårsake problemer med SEO siden søkemotorer kanskje ikke kan indeksere innhold fra eksterne kilder på riktig måte.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Denne linjen importerer Link-komponenten fra react-router-dom-biblioteket.
2. Denne linjen oppretter et lenkeelement som vil omdirigere til "https://www.example.com" når det klikkes, og åpne det i en ny fane uten henvisningsinformasjon sendt til den nye siden. Teksten til lenken vil være "Ekstern lenke".
Hva er en ekstern lenke
En ekstern lenke i React Router er en lenke som tar brukeren til en side utenfor applikasjonen. Dette kan være en ekstern nettside eller en annen applikasjon. Eksterne lenker brukes til å gi brukere tilleggsinformasjon eller ressurser relatert til innholdet i applikasjonen. De kan også brukes som en måte å lede brukere til andre applikasjoner eller nettsteder for videre utforskning.
Hvordan legge til en ekstern lenke med React Router
Å legge til en ekstern kobling med React Router i React Router er en enkel prosess. Først må du importere Link-komponenten fra react-router-dom-pakken. Deretter kan du bruke koblingskomponenten til å opprette en kobling til en ekstern URL. Syntaksen for å lage en kobling ser slik ut:
Hvis du for eksempel ønsker å opprette en kobling til Google, vil den se slik ut:
Når du har opprettet koblingen din, kan du legge til ekstra rekvisitter som mål- og rel-attributter for bedre tilgjengelighet og sikkerhetsformål. For eksempel:
