I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.
Crea una pagina 404 personalizzata utilizzando un semplice percorso React per offrire ai tuoi visitatori un'esperienza utile quando ne hanno più bisogno.
Prima o poi, un utente visiterà un URL che non esiste sul tuo sito web. Ciò che l'utente fa dopo dipende da te.
Potrebbero premere il pulsante Indietro e lasciare il tuo sito. Invece, puoi fornire un'utile pagina 404 per aiutarli a continuare a navigare sul tuo sito web.
Per i siti Web React, puoi utilizzare il router React per creare un'utile pagina 404 non trovata.
Creazione di una pagina 404
IL errore 404 si verifica quando si tenta di visitare una pagina su un sito Web che il server non riesce a trovare. In qualità di sviluppatore, gestire gli errori 404 significa creare una pagina che il server utilizza in sostituzione quando non riesce a trovare la pagina richiesta.
In React, lo fai creando un componente non trovato che verrà visualizzato su rotte che non esistono.
Questo articolo presuppone che tu abbia già un'applicazione React funzionante con il routing impostato. Se non lo fai, creare un'applicazione React e poi installa Router di reazione.
Crea un nuovo file chiamato NotFound.js e aggiungi il seguente codice per creare la pagina 404.
importare { Collegamento } da "reagire-router-dom";
esportarepredefinitofunzioneNon trovato() {
ritorno (
<div>
<h1>Ops! Sembra che tu sia perso.</h1>
<P>Ecco alcuni link utili:</P>
<Collegamento a='/'>Casa</Link>
<Collegamento a='/blog'>Blog</Link>
<Collegamento a='/contact'>Contatto</Link>
</div>
)
}
Questa pagina 404 esegue il rendering di un messaggio e di collegamenti per reindirizzare un utente a pagine comuni del sito Web.
Instradamento alla pagina 404
Puoi creare un percorso normale utilizzando il router React in questo modo:
importare { Itinerario, Itinerari } da "reagire-router-dom";
funzioneApp() {
ritorno (
<Itinerari>
<Percorso percorso="/" elemento={ <Casa/> }/>
</Routes>
)
}
Si specifica il percorso dell'URL e l'elemento che si desidera visualizzare in quella route.
La pagina 404 viene visualizzata per i percorsi che non esistono sul sito web. Quindi, invece di specificare il percorso, usa un asterisco (*).
<Percorso percorso='*' elemento={<Non trovato />}/>
Usando * esegue il rendering del componente NotFound per tutti gli URL non specificati nelle route.
Routing in React
Puoi facilmente creare una pagina 404 per tutti gli URL che non esistono nella tua app Web React utilizzando un router.
I browser hanno una pagina 404 predefinita, ma crearne una personalizzata ti consente di dire ai tuoi utenti cosa è andato storto e come possono risolverlo. Puoi anche creare una pagina 404 che si adatti al tuo marchio.
