Obtendo dados do loader por parâmetros de URL no React Router

Na lição anterior, escrevemos uma função para obter os dados da página do produto. Vamos importar getProduct no arquivo product.jsx:

routes/product.jsximport { getProduct } from '../forStorage';

Vamos escrever a função do loader loader logo após a importação e antes da função Product. Vamos passar os parâmetros da URL para ela:

routes/product.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

Também vamos importar o hook useLoaderData para usar os dados retornados pelo loader:

routes/product.jsximport { useLoaderData } from 'react-router-dom';

Vamos aplicar useLoaderData, substituindo consequentemente a linha que cria o objeto product no início da função Product pela seguinte:

routes/product.jsxconst { product } = useLoaderData();

E, claro, vamos mudar um pouco nossa markup, já que removemos o antigo objeto product. Vamos substituir o conteúdo dos parágrafos:

routes/product.jsx<p>Nome: {product.name}</p>
<p>Preço: {product.cost}</p>
<p>Quantidade: {product.amount}</p>

Pelo seguinte:

routes/product.jsx<p>Nome: {product.name ? product.name : <i>sem nome</i>}</p>
<p>Preço: {product.cost ? product.cost : <i>desconhecido</i>}</p>
<p>Quantidade: {product.amount ? product.amount : <i>desconhecida</i>}</p>

Agora só falta abrir o main.jsx e adicionar a importação do loader, vamos chamá-lo de productLoader:

main.jsximport Product, {
  loader as productLoader,
} from './routes/product';

E especificá-lo como o loader para o objeto de rota da página do produto, adicionando-o em children após a propriedade element:

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
],

Pronto, finalizamos o carregamento de dados para a página do produto! No entanto, ainda não temos nada para carregar. Inicie o aplicativo, adicione alguns produtos e clique neles na lista para verificar se tudo está funcionando.