Tratamento de erro Not Found no React Router

Ao criar um aplicativo, é preciso prestar atenção ao aparecimento de vários erros durante o seu uso posterior. Nesta lição, aprenderemos a trabalhar com o erro 'Not Found'. Esse erro pode aparecer, por exemplo, se um usuário clicar em um link que leva a uma página que não existe.

Para começar, vamos abrir nosso aplicativo, que fizemos nas lições anteriores, e substituir a marcação do componente Root. Agora, ao iniciar o aplicativo, teremos uma lista de dois produtos exibida:

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

export default Root;

Vamos adicionar alguns estilos ao index.css:

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

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

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

E agora clique nos links. Como não temos layouts de página para nossos produtos, os links nos levarão apenas para uma tela com o erro '404 Not Found' e uma reprimenda por não termos conseguido inventar algo mais bonito e interessante do que o que o React Router exibiu para nós por padrão.

Vamos criar nossa própria página, que será exibida caso ocorra um erro 404. Para isso, na pasta src, crie um arquivo error-page-404.jsx.

Dentro do componente React ErrorPage404, usaremos o hook useRouteError para capturar o erro, que registraremos no console:

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

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

}

export default ErrorPage404;

Em seguida, na marcação do componente ErrorPage404, exibiremos alguns cabeçalhos informando sobre o erro e mostraremos propriedades do objeto error, como statusText e data (o objeto error e suas propriedades também podem ser vistos se você abrir o console e começar a clicar em nossos links no aplicativo).

return (
	<div>
		<h1>Oi! Esta é uma Página de Erro</h1>
		<h2>Erro 404 Não Encontrado</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Certifique-se de abrir o arquivo main.jsx e adicionar mais uma linha de importação para ErrorPage404:

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

E também adicione mais uma propriedade errorElement ao objeto Router - este elemento é exibido quando um erro ocorre nesta rota. O valor do elemento de erro será nosso componente ErrorPage404:

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

Pegue o aplicativo criado por você na tarefa da lição anterior. Adicione à página inicial uma lista composta por alguns links, como mostrado na lição. Deixe os valores de href dos links como /students/1 e /students/2, e o texto dos links como 'Student1' e 'Student2', respectivamente. Certifique-se de que, ao clicar nos links, apareça uma tela com o erro que o React Router exibe por padrão.

E agora crie sua própria página separada de erro 404, você pode exibir nela o que quiser. Conecte-a, como mostrado na lição. E agora verifique se, ao clicar nos links, você é direcionado para ela.