Utilizando dados do loader no React Router

Na lição anterior, obtivemos dados do armazenamento usando um loader. Para utilizar esses dados, usamos o hook useLoaderData. Vamos abrir o arquivo root.jsx e adicionar o hook na importação:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

Na função Root, agora obteremos os dados na constante products e trabalharemos com ela. Se tivermos alguns produtos, a lista será exibida; caso contrário, exibiremos o parágrafo 'no products here ...'. Na tag nav, agora usamos um loop padrão para exibir os produtos obtidos. Cada item será encapsulado no componente Link e cada um terá seu próprio endereço (falaremos sobre isso mais tarde). Consequentemente, se um produto não tiver nome, 'Unnamed' será exibido por padrão. Portanto, considerando o exposto acima, nosso código para a função Root ficará assim:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

Se reiniciarmos o aplicativo agora e acessarmos a página inicial, veremos apenas 'no products here ...', pois ainda não adicionamos nenhum produto ao armazenamento.

Pegue o aplicativo criado por você nas tarefas das lições anteriores. Usando os materiais da lição, adicione a exibição dos dados dos estudantes obtidos do loader, conforme descrito na lição.