Comment créer une page 404 en React en utilisant React Router

Tôt ou tard, un individu verra une URL qui n'existe pas sur votre site internet. Ce que l'utilisateur fait par la suite dépend de vous.

Il peut appuyer sur le bouton retour ainsi que quitter votre site internet. Au contraire, vous pouvez donner une page web 404 utile pour les aider à rester naviguer sur votre site internet.

Pour les sites web React, vous pouvez utiliser le routeur React pour développer une page web 404 non trouvée utile.

Création d'une page 404

L'erreur 404 se produit lorsque vous tentez de visiter une page sur un site web que le serveur ne peut pas trouver. En tant que concepteur, la gestion des erreurs 404 implique de créer une page web que le serveur web utilise en remplacement lorsqu'il ne trouve pas la page web demandée.

Dans React, vous faites cela en produisant une partie non découverte qui rendra certainement sur les cours qui n'existent pas.

Ce post suppose que vous avez déjà une application React fonctionnelle avec le routage mis en place. Si ce n'est pas le cas, développez une application React et après montez. React Router .

Créez un nouveau fichier appelé NotFound.js et ajoutez également le code suivant pour développer la page web 404.

Cette page web 404 fournit un message et des liens pour réacheminer un client vers des pages web typiques du site web.

Voir aussi :  Créer une API REST avec le framework Django REST

Routage vers la page 404

Vous pouvez développer un itinéraire typique en utilisant React router comme ceci :

Vous définissez le parcours de l'URL et aussi l'élément que vous voulez rendre à ce parcours.

La page Web 404 affiche des écrans pour les cours qui n'existent pas sur le site Web. Ainsi, au lieu de définir le chemin, faites usage d'un astérisque ( * ).

Utilisation de * fournit le composant NotFound pour toutes les URL non spécifiées dans les cours.

Routage dans React

Vous pouvez rapidement créer une page 404 pour toutes les URL qui n'existent pas dans votre application web React en faisant usage d'un routeur.

Les navigateurs ont une page 404 par défaut, mais le développement d'une page personnalisée vous permet d'indiquer à vos individus ce qui s'est mal passé et comment ils peuvent y remédier. Vous pouvez également créer une page 404 qui correspond au nom de votre marque.

Qu'est-ce que le composant BrowserRouter /> ?

BrowserRouter : BrowserRouter est une implémentation de routeur qui utilise l'API d'historique HTML5 (pushState, replaceState et l'événement popstate) pour synchroniser votre interface utilisateur avec l'URL. C'est le composant parent qui est utilisé pour stocker tous les autres composants.

Comment créer une page 404 dans le routeur React ?

Chaque site Web a besoin d'une page 404 si l'URL n'existe pas ou si l'URL a peut-être été modifiée. Pour mettre en place une page 404 dans le routage angulaire, nous devons d'abord créer un composant à afficher chaque fois qu'une erreur 404 se produit. Dans l'approche suivante, nous allons créer un composant de réaction simple appelé PagenotfoundComponent.

Voir aussi :  3 structures de données avancées que chaque programmeur devrait connaître

Comment afficher la page 404 en réaction?

Une autre façon de gérer la page 404 introuvable dans le routeur React consiste à rediriger l'utilisateur vers une autre page lorsqu'il essaie d'accéder à une page qui n'existe pas. Copié ! Dans l'exemple, au lieu de restituer un composant PageNotFound, nous redirigeons l'utilisateur vers / s'il accède à une route qui n'existe pas. Copié !

Comment créez-vous un routeur de réaction simple pour naviguer sur plusieurs pages ?

Utilisation du routeur React

  • Ajouter un routeur React. npm installez le réact-routeur-dom.
  • Construisez vos pages. Nous allons créer une collection de pages, dans le répertoire /src/pages.
  • Créez la barre de navigation. Maintenant que nous comprenons la structure des pages, créons une barre de navigation pour passer d'une page à l'autre.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.