Rota sem Caminho no React Router

Nesta lição, vamos examinar mais uma propriedade útil da rota sem caminho.

Você sabe que para cada objeto de rota você pode adicionar a propriedade errorElement e como valor definir o elemento que deseja exibir quando ocorrer um erro.

Mas e se tivermos errorElement igual para todas as rotas? Claro, podemos colocar a mesma coisa em cada uma, ou podemos usar uma rota sem caminho, envolvendo as rotas filhas que nos interessam. Então, caso ocorra um erro em uma delas, nossa rota sem caminho irá capturá-los e exibir seu errorElement.

Vamos ao arquivo main.jsx e envolver todas as nossas rotas filhas em uma rota sem caminho, tornando-as filhas dela (por sua vez, esta rota se tornará filha da rota raiz), não vamos esquecer de adicionar também a propriedade errorElement:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		action: rootAction,
		children: [
			{
				errorElement: <ErrorPage404 />,
				children: [
					{ index: true, element: <Index /> },
					{
						path: 'products/:productId',
						element: <Product />,
						loader: productLoader,
					},
					{
						path: 'products/:productId/edit',
						element: <EditProduct />,
						loader: editProductLoader,
						action: editAction,
					},
					{
						path: 'products/:productId/delete',
						action: deleteAction,
					},
				],
			},
		],
	},
]);

Como verificar agora o funcionamento deste código? Podemos adicionar uma linha que lança um erro (não se esqueça de removê-la depois, quando terminar de testar). Vamos, por exemplo, adicioná-la como a primeira linha na função action para a rota de exclusão do produto, então, ao tentar excluir um produto, veremos o erro:

export async function action({ params }) {
	throw new Error('erro');
	await deleteProduct(params.productId);
	return redirect('/');
}

Agora tente excluir algum produto.

Pegue o aplicativo criado por você nas tarefas das lições anteriores. Usando os materiais da lição, envolva suas rotas filhas em uma rota sem caminho com a propriedade errorElement e verifique que isso funciona.