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

Tôt ou tard, un utilisateur visitera une URL qui n’existe pas sur votre site web. Ce que l’utilisateur fait ensuite dépend de vous. Il peut appuyer sur le bouton « retour » et quitter votre site. En revanche, vous pouvez lui fournir une page 404 utile pour l’aider à continuer à naviguer sur votre site web.

Pour les sites Web React, vous pouvez utiliser le routeur React pour créer une page 404 non trouvée utile qui s’affiche lorsqu’un utilisateur visite une route qui n’existe pas.

Création d’une page 404

L’erreur 404 se produit lorsque vous essayez de visiter une page d’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 comme remplacement lorsqu’il ne peut pas trouver la page demandée.

Cet article suppose que vous avez déjà une application React fonctionnelle avec un routage configuré. Si ce n’est pas le cas, créez une application React et installez React Router.

Créez un nouveau fichier appelé NotFound.js et ajoutez le code suivant pour créer la page 404.

 import { Link } from "react-router-dom";

export default function NotFound() {
    return (
        <div>
            <h1>Oops! You seem to be lost.</h1>
            <p>Here are some helpful links:</p>
            <Link to="https://www.makeuseof.com/">Home</Link>
            <Link to='/blog'>Blog</Link>
            <Link to='/contact'>Contact</Link>
        </div>
    )
}
 

Cette page 404 React affiche un message et des liens pour rediriger l’utilisateur vers des pages communes du site web.

Routage vers la page 404

Vous spécifiez les routes à l’aide du routeur React en spécifiant le chemin de l’URL et le composant que vous souhaitez rendre pour cette route.

Par exemple, voici une route qui rend le composant Accueil composant.

 import { Route, Routes } from "react-router-dom";

function App() {
    return (
        <Routes>
            <Route path="https://www.makeuseof.com/" element={ <Home/> }/>
        </Routes>
    )
} 

La page d’erreur 404 affiche des chemins qui n’existent pas sur le site web. Ainsi, au lieu de spécifier le chemin, utilisez un astérisque (*) pour correspondre à quoi que ce soit.

 <Route path='*' element={<NotFound />}/>
 

Le composant NotFound effectue un rendu pour toutes les URL non spécifiées dans les routes.

Le routage dans React

Les navigateurs ont une page 404 par défaut, mais en créer une personnalisée vous permet de dire à vos utilisateurs ce qui n’a pas fonctionné et comment ils peuvent y remédier. Vous pouvez facilement créer une page 404 React pour toutes les URL qui n’existent pas dans votre application web en utilisant un react-router-dom. Vous pouvez également la styliser en fonction de votre marque.