Hovedproblemet relateret til React Router eksterne links er, at de kan forårsage uventet adfærd, når du navigerer mellem forskellige sider. For eksempel, hvis en bruger klikker på et eksternt link, mens han er på en React Router-side, vil browseren navigere væk fra den aktuelle side i stedet for at dirigere til den nye side i applikationen. Dette kan føre til forvirring og frustration for brugere, der forventer en glidende overgang mellem sider. Derudover kan eksterne links også forårsage problemer med SEO, da søgemaskiner muligvis ikke er i stand til korrekt at indeksere indhold fra eksterne kilder.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Denne linje importerer Link-komponenten fra react-router-dom-biblioteket.
2. Denne linje opretter et linkelement, der vil omdirigere til "https://www.example.com", når der klikkes på det, og åbne det i en ny fane uden henvisningsoplysninger sendt til den nye side. Teksten på linket vil være "Eksternt link".
Hvad er et eksternt link
Et eksternt link i React Router er et link, der fører brugeren til en side uden for applikationen. Dette kan være en ekstern hjemmeside eller en anden applikation. Eksterne links bruges til at give brugerne yderligere information eller ressourcer relateret til indholdet i applikationen. De kan også bruges som en måde at dirigere brugere til andre applikationer eller websteder for yderligere udforskning.
Sådan tilføjer du et eksternt link med React Router
Tilføjelse af et eksternt link med React Router i React Router er en ligetil proces. Først skal du importere Link-komponenten fra react-router-dom-pakken. Derefter kan du bruge Link-komponenten til at oprette et link til en ekstern URL. Syntaksen for at oprette et link ser sådan ud:
Hvis du for eksempel vil oprette et link til Google, vil det se sådan ud:
Når du har oprettet dit link, kan du tilføje yderligere rekvisitter såsom mål- og rel-attributter for bedre tilgængelighed og sikkerhedsformål. For eksempel:
