Manejo de errores 404 en React.js

Un error 404, que a menudo se muestra como "404 no encontrado" o "Página no encontrada", es un mensaje de error común que puede encontrar mientras navega por la web. Simplemente significa que la página web o el recurso específico que usted solicitó no se pudo encontrar en el servidor.

En este tutorial, aprenderemos cómo manejar estos errores 404 en React.js. Ahora, profundicemos en el código y veamos cómo manejar estos errores de manera elegante en ReactJS.

React Router es una biblioteca estándar para enrutamiento en React. Mantiene su interfaz de usuario sincronizada con la URL. Usaremos esta biblioteca para demostrar cómo detectar un error 404.

Primero, necesitamos instalar React Router. Abra su terminal, navegue hasta la carpeta de su proyecto y escriba el siguiente comando:

npm install react-router-dom

Configurar rutas

Después de instalar React Router, queremos configurar el enrutamiento para nuestra aplicación. Aquí hay un ejemplo muy básico:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;

En el ejemplo anterior, Switch se utiliza para representar solo el primer Route o Redirect que coincida con la ubicación. Si ninguno de los componentes Route coincide, recurrirá al componente NotFound, que usaremos para mostrar una página de error 404 descriptiva.

Crear una página 404 personalizada

Ahora construyamos nuestro componente NotFound. Puede ser tan simple o tan complejo como quieras. El objetivo principal aquí es informar al usuario que la página que está buscando no existe y guiarlo de regreso a una parte del sitio que sí existe.

import React from 'react';

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

export default NotFound;

Con esta configuración, cuando un usuario navega a una página que no existe, se le muestra este NotFound componente.