Manejo del error Not Found en React Router

Al crear una aplicación, es necesario prestar atención a la aparición de varios errores durante su uso posterior. En esta lección aprenderemos a trabajar con el error 'Not Found'. Este error puede aparecer, por ejemplo, si un usuario hace clic en un enlace que lleva a una página que no existe.

Para empezar, abramos nuestra aplicación, que creamos en lecciones anteriores, y reemplacemos el maquetado del componente Root. Ahora al iniciar la aplicación se mostrará una lista de dos productos:

function Root() {
	return (
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
	);
}

export default Root;

Añadamos algunos estilos a index.css:

body {
	font-size: 18px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

a {
	text-decoration: none;
	color: blue;
}

Y ahora haga clic en los enlaces. Dado que no tenemos maquetos de páginas para nuestros productos, los enlaces solo nos llevarán a la pantalla con el error '404 Not Found' y un reproche de que podríamos haber ideado algo más bonito e interesante que lo que React Router nos mostró por defecto.

Hagamos nuestra propia página, que se mostrará en caso de que aparezca el error 404. Para ello, en la carpeta src crearemos el archivo error-page-404.jsx.

Dentro del componente React ErrorPage404 utilizaremos el hook useRouteError para capturar el error, que mostraremos en la consola:

import { useRouteError } from 'react-router-dom';

function ErrorPage404() {
	const error = useRouteError();
	console.error(error);

}

export default ErrorPage404;

A continuación, en el maquetado del componente ErrorPage404 mostraremos un par de encabezados que informen sobre el error y mostraremos propiedades del objeto error como statusText y data (el objeto error y sus propiedades también pueden verse si abre la consola y comienza a hacer clic en nuestros enlaces en la aplicación).

return (
	<div>
		<h1>¡Hola! Es una página de error</h1>
		<h2>Error 404 No Encontrado</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

No olvide abrir el archivo main.jsx y añadir otra línea de importación con ErrorPage404:

import ErrorPage404 from './error-page-404';

Y también añada otra propiedad errorElement en el objeto Router - este elemento se muestra cu ocurre un error en esta ruta. El valor del elemento de error será nuestro componente ErrorPage404:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
	},
]);

Tome la aplicación creada por usted en la tarea de la lección anterior. Añada a la página principal una lista que conste de un par de enlaces, como se muestra en la lección. Que los valores de href de los enlaces sean - /students/1 y /students/2, y el texto de los enlaces - 'Student1' y 'Student2' respectivamente. Asegúrese de que al hacer clic en los enlaces aparezca una pantalla con el error que React Router muestra por defecto.

Y ahora cree su propia página separada con el error 404, puede mostrar en ella lo que desee. Conéctela como se muestra en la lección. Y ahora asegúrese de que al hacer clic en los enlaces llega precisamente a ella.