Página 404 y estados no encontrados

Cuando trabajas con rutas en una aplicación web, manejar una página 404 y otros estados de error no es un detalle opcional: es lo que separa una experiencia frustrante de una amigable. Aquí aprenderás a diferenciar una ruta inexistente de un recurso no encontrado usando React Router v7, ideal para desarrolladores frontend que construyen apps con navegación anidada.

Piensa en todos los escenarios donde algo puede salir mal. El usuario escribe mal una URL, entra a una propiedad que ya se eliminó o comparte un link que dejó de ser válido. Cada uno de esos casos merece una respuesta distinta.

Por qué un comodín no basta para manejar errores

En la aplicación de ejemplo ya existe un comodín que detecta páginas no encontradas [00:38]. Si entras a una ruta como /hola que no está definida en el archivo de rutas, aparece el mensaje "Página no encontrada". Cualquier ruta inventada muestra el mismo resultado.

El problema aparece con las rutas anidadas. ¿Qué pasa si buscas una propiedad con un número que no existe? La ruta sí es válida, pero el contenido no está. El resultado era un error nada amigable: imagen cortada, textos como cajas vacías y ninguna explicación para el usuario [01:26].

¿Cuál es la diferencia entre una ruta inexistente y un recurso no encontrado? Una ruta inexistente es una URL que nunca se definió, como /hola. Un recurso no encontrado es una ruta válida cuyo dato ya no existe, como una propiedad eliminada. Cada caso necesita su propio mensaje.

Esto ocurre en la vida real. Imagina que un usuario ve la propiedad número dos, comparte el link, y mientras tanto esa propiedad deja de estar disponible [01:47]. La URL sigue siendo la misma, pero el documento ya no existe. El link compartido dará error.

Qué recomienda Devin sobre los estados de error

Antes de escribir código, se consultó a Devin en modo plan para evitar que ejecutara nada todavía [03:04]. La idea era validar si tener dos tipos de error tenía sentido y pedir alguna recomendación extra.

Devin exploró el proyecto y describió lo que encontró [04:00]:

• Un router con el path del asterisco, es decir, el comodín, apuntando a NotFoundPage.
• Ningún errorElement definido aún.
• Un PropertyDetailPage que usa properties.find y accede con optional chaining.

Aquí viene lo interesante. En React Router v7 hay una distinción clave [04:44]:

• El path con asterisco captura rutas que no existen.
• El errorElement o error boundary captura errores reales lanzados durante el render con loaders o actions, como un 404 de recurso o un 500 de servidor.

¿Qué es un errorElement en React Router? Es el complemento natural del NotFoundPage. Captura errores inesperados de render y, con el hook isRouteErrorResponse, distingue entre un 404 y otros errores dentro de una ruta válida.

Cómo mostrar un mensaje cuando la propiedad no existe

En el PropertyDetailPage, la app solo mostraba contenido cuando la propiedad existía. La solución fue preguntar: ¿y si no hay match? [05:59]

Se preparó un componente sencillo, PropertyNotFound, que se coloca arriba del componente principal. La lógica es directa: si no hay propiedad, imprime ese componente [06:22]. El mensaje indica que la propiedad ya no está disponible e incluye un link hacia la página de search para ver otras propiedades.

Para probarlo, se comenta la propiedad número dos en el listado y se visita su ruta [06:47]. En lugar del error roto, ahora aparece "Propiedad no encontrada" con estilos que siguen la línea gráfica de la app y un call to action [07:39].

¿Por qué importa ese enlace? Porque esta propiedad sí existía y solo dejó de estar disponible. Te interesa que el usuario se mantenga en la aplicación viendo contenido relacionado a lo que buscaba [08:02].

Cómo mejorar la página 404 global

La página de error global también recibió mejoras [08:26]. Antes solo decía "Página no encontrada". Los cambios fueron:

• Importar el componente Link de React Router para un botón "volver al inicio".
• Agregar un título claro, ya que este caso corresponde a un error 404 de página inexistente.
• Aplicar clases como main-content y not-found para respetar la estética.

Con esto, el mensaje global se vuelve consistente con el resto del diseño y mantiene al usuario dentro de la aplicación en vez de dejarlo en un callejón sin salida.

Qué aprendiste sobre el manejo de errores en rutas

Lo importante fue separar dos casos que suelen confundirse: la página 404 global que responde al comodín cuando la ruta no existe, y el recurso no encontrado cuando la ruta es válida pero el dato desapareció [08:53]. Esa diferencia mejora directamente la experiencia de usuario.

Algunos conceptos técnicos que aparecieron y vale la pena retener:

• El path con asterisco funciona como comodín para rutas inexistentes.
• El errorElement captura errores de render, loaders y actions.
• El hook isRouteErrorResponse distingue un 404 de un error 500.
• El optional chaining permite acceder a datos que podrían no existir sin romper la app.

En la siguiente clase usarás Query params para llevar filtros de búsqueda a la URL con otro hook de React Router llamado useSearchParams. ¿Cómo manejas tú los estados de error en tus proyectos? Cuéntalo en los comentarios.