Comment créer une page 404 personnalisée à l’aide de React Router V6 et d’une page 404 personnalisée dans Next.js ? / Blogs / Perficient

1) Page 404 personnalisée à l’aide de React Router V6 :

React Router est une bibliothèque JavaScript populaire couramment utilisée pour créer des applications d’une seule page dans React. Il propose un ensemble de composants et de fonctions qui vous permettent de définir le routage et la navigation de votre application de manière déclarative.

Dans cet article de blog, nous vous guiderons tout au long du processus de conception et de mise en œuvre d’une page 404 personnalisée à l’aide de React Router V6. Une page 404 s’affiche lorsqu’un utilisateur tente de visiter une URL qui n’existe pas sur votre site. Par défaut, React Router affiche un message de base « 404 — Page non trouvée » lorsqu’un utilisateur tente de visiter une URL inexistante. Cependant, vous pouvez facilement personnaliser cela en créant une page 404 personnalisée à l’aide du composant NotFound proposé par la bibliothèque.

Exemple de code :

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import About from './components/about.js';
import Contact from './components/contact.js';
import Home from './components/home.js';
import './App.css';

const NotFound = () => {
  return (
    <>
      <h1>404 - Page Not Found</h1>
      <p>Sorry, the page you are looking for does not exist.</p>
    </>
  );
};

function App() {
  return (
    <div className="App">
      <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        {/* The NotFound component is placed last to catch all unmatched routes */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
    </div>
  );
}

export default App;

Sortir:

Si cela correspond aux itinéraires tels que /, /about ou /contact :

Itinéraire de secours :

Dans le code ci-dessus, le composant NotFound est défini comme la dernière route avec le chemin défini sur « * », garantissant qu’il intercepte toutes les URL non définies. Cela garantit qu’il ne sera rendu que si aucune des autres routes (telles que /, /about ou /contact) ne correspond à l’URL actuelle, agissant comme un fourre-tout pour les routes non définies.

Le composant NotFound est positionné au bas du composant Routes, garantissant qu’il s’affiche uniquement lorsqu’aucune autre route ne correspond à l’URL. Le composant NotFound agit alors comme une route de secours, capturant toutes les URL qui ne correspondent pas aux autres routes définies dans l’application.

2) Page 404 personnalisée dans Next.js (routeur d’application) :

Gestion automatique des itinéraires non résolus via not-found.js

Alors que le développement Web continue de progresser rapidement, Next.js continue de placer la barre plus haut grâce à ses améliorations continues. Avec la sortie de Next.js 13.3, une nouvelle fonctionnalité a été introduite qui facilite grandement la gestion des itinéraires sans correspondance dans votre application. Cette amélioration rationalise le processus de création d’une page 404 personnalisée, la rendant encore plus conviviale pour les développeurs. Dans cet article de blog, nous aborderons ces mises à jour et vous montrerons comment en tirer le meilleur parti.

La page introuvable dans Next.js

Next.js 13.3 a simplifié le processus de gestion des itinéraires sans correspondance et de personnalisation de 404 pages. Désormais, vous pouvez gérer ces itinéraires sans effort en renommant un fichier not-found.js. En créant un fichier app/not-found.js, il prendra automatiquement en charge toutes les requêtes vers des URL qui ne correspondent pas à un itinéraire défini dans votre application.

Ici, vous pouvez le faire via not-found.js:

Exemple de code :

import React from 'react';

function NotFoundPage() {
  const notFoundStyle = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    flexDirection: 'column',
    backgroundColor: '#f4f4f9',
    color: '#333',
    fontFamily: 'Arial, sans-serif',
    textAlign: 'center',
  };

  const headingStyle = {
    fontSize: '4rem',
    fontWeight: 'bold',
    margin: '0',
  };

  const subheadingStyle = {
    fontSize: '1.5rem',
    marginTop: '20px',
  };

  const emojiStyle = {
    fontSize: '5rem',
    marginBottom: '20px',
  };

  return (
    <div style={notFoundStyle}>
      <div style={emojiStyle}>🚫</div>
      <h1 style={headingStyle}>Page Not Found</h1>
      <p style={subheadingStyle}>Sorry, the page you are looking for does not exist.</p>
    </div>
  );
}

export default NotFoundPage;

Sortir: