Il problema principale relativo ai collegamenti esterni di React Router è che possono causare comportamenti imprevisti durante la navigazione tra pagine diverse. Ad esempio, se un utente fa clic su un collegamento esterno mentre si trova su una pagina React Router, il browser si allontanerà dalla pagina corrente invece di indirizzare alla nuova pagina all'interno dell'applicazione. Ciò può creare confusione e frustrazione per gli utenti che si aspettano una transizione graduale tra le pagine. Inoltre, i collegamenti esterni possono anche causare problemi con la SEO poiché i motori di ricerca potrebbero non essere in grado di indicizzare correttamente i contenuti da fonti esterne.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Questa riga importa il componente Link dalla libreria react-router-dom.
2. Questa riga crea un elemento di collegamento che reindirizzerà a "https://www.example.com" quando viene cliccato e lo aprirà in una nuova scheda senza che vengano inviate informazioni sul referrer alla nuova pagina. Il testo del collegamento sarà "Link esterno".
Che cos'è un collegamento esterno
Un collegamento esterno in React Router è un collegamento che porta l'utente a una pagina al di fuori dell'applicazione. Potrebbe trattarsi di un sito Web esterno o di un'altra applicazione. I collegamenti esterni vengono utilizzati per fornire agli utenti ulteriori informazioni o risorse relative al contenuto all'interno dell'applicazione. Possono anche essere utilizzati come un modo per indirizzare gli utenti ad altre applicazioni o siti Web per ulteriori esplorazioni.
Come aggiungere un collegamento esterno con React Router
L'aggiunta di un collegamento esterno con React Router in React Router è un processo semplice. Innanzitutto, devi importare il componente Link dal pacchetto react-router-dom. Quindi, puoi utilizzare il componente Link per creare un collegamento a un URL esterno. La sintassi per la creazione di un collegamento è simile a questa:
Ad esempio, se volessi creare un collegamento a Google, sarebbe simile a questo:
Dopo aver creato il tuo collegamento, puoi aggiungere ulteriori oggetti di scena come gli attributi target e rel per una migliore accessibilità e motivi di sicurezza. Per esempio:
