Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.
Créez une page 404 personnalisée à l'aide d'un simple itinéraire React pour offrir à vos visiteurs une expérience utile lorsqu'ils en ont le plus besoin.
Tôt ou tard, un utilisateur visitera une URL qui n'existe pas sur votre site Web. Ce que l'utilisateur fait après cela dépend de vous.
Ils pourraient appuyer sur le bouton de retour et quitter votre site. Au lieu de cela, vous pouvez fournir une page 404 utile pour les aider à continuer à naviguer sur votre site Web.
Pour les sites Web React, vous pouvez utiliser le routeur React pour créer une page 404 introuvable utile.
Création d'une page 404
Le erreur 404 se produit lorsque vous essayez de visiter une page sur un site Web que le serveur ne peut pas trouver. En tant que développeur, gérer les erreurs 404 signifie créer une page que le serveur utilise en remplacement lorsqu'il ne trouve pas la page demandée.
Dans React, vous faites cela en créant un composant introuvable qui s'affichera sur des routes qui n'existent pas.
Cet article suppose que vous disposez déjà d'une application React fonctionnelle avec un routage configuré. Si vous ne le faites pas, créer une application React puis installez Réagir Routeur.
Créez un nouveau fichier appelé NotFound.js et ajoutez le code suivant pour créer la page 404.
importer { Lien } depuis "réagir-routeur-dom" ;
exporterdéfautfonctionPas trouvé() {
retour (
<div>
<h1>Oops! Vous semblez être perdu.</h1>
<p>Voici quelques liens utiles :</p>
<Lien vers ='/'>Maison</Link>
<Lien vers ='/blog'>Blog</Link>
<Lien vers ='/contact'>Contact</Link>
</div>
)
}
Cette page 404 affiche un message et des liens pour rediriger un utilisateur vers des pages communes du site Web.
Routage vers la page 404
Vous pouvez créer une route normale à l'aide du routeur React comme ceci :
importer { Itinéraire, Itinéraires } depuis "réagir-routeur-dom" ;
fonctionApplication() {
retour (
<Itinéraires>
<Chemin d'accès ="/" élément={ <Maison/> }/>
</Routes>
)
}
Vous spécifiez le chemin de l'URL et l'élément que vous souhaitez afficher sur cette route.
La page 404 s'affiche pour les chemins qui n'existent pas sur le site Web. Ainsi, au lieu de spécifier le chemin, utilisez un astérisque (*).
<Chemin d'accès ='*' élément={<Pas trouvé />}/>
En utilisant * rend le composant NotFound pour toutes les URL non spécifiées dans les routes.
Routage en React
Vous pouvez facilement créer une page 404 pour toutes les URL qui n'existent pas dans votre application Web React à l'aide d'un routeur.
Les navigateurs ont une page 404 par défaut, mais en créer une personnalisée vous permet d'indiquer à vos utilisateurs ce qui ne va pas et comment ils peuvent le réparer. Vous pouvez également créer une page 404 qui correspond à votre marque.
