Det största problemet med React Router externa länkar är att de kan orsaka oväntat beteende när man navigerar mellan olika sidor. Till exempel, om en användare klickar på en extern länk på en React Router-sida, kommer webbläsaren att navigera bort från den aktuella sidan istället för att dirigera till den nya sidan i applikationen. Detta kan leda till förvirring och frustration för användare som förväntar sig en smidig övergång mellan sidor. Dessutom kan externa länkar också orsaka problem med SEO eftersom sökmotorer kanske inte kan korrekt indexera innehåll från externa källor.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Den här raden importerar Link-komponenten från react-router-dom-biblioteket.
2. Den här raden skapar ett länkelement som omdirigerar till "https://www.example.com" när du klickar på det och öppnar det på en ny flik utan att någon hänvisningsinformation skickas till den nya sidan. Texten på länken kommer att vara "Extern länk".
Vad är en extern länk
En extern länk i React Router är en länk som tar användaren till en sida utanför applikationen. Detta kan vara en extern webbplats eller en annan applikation. Externa länkar används för att ge användarna ytterligare information eller resurser relaterade till innehållet i applikationen. De kan också användas som ett sätt att dirigera användare till andra applikationer eller webbplatser för vidare utforskning.
Hur man lägger till en extern länk med React Router
Att lägga till en extern länk med React Router i React Router är en enkel process. Först måste du importera Link-komponenten från react-router-dom-paketet. Sedan kan du använda länkkomponenten för att skapa en länk till en extern URL. Syntaxen för att skapa en länk ser ut så här:
Om du till exempel vill skapa en länk till Google skulle det se ut så här:
När du har skapat din länk kan du lägga till ytterligare rekvisita som mål- och rel-attribut för bättre tillgänglighet och säkerhet. Till exempel:
