Datu iegūšana no loader pēc URL parametriem React Router

Iepriekšējā nodarbībā mēs uzrakstījām funkciju produkta lapas datu iegūšanai, importēsim getProduct failā product.jsx:

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

Uzrakstīsim loader funkciju loader tūlīt pēc importa un pirms funkcijas Product. Padodam tai URL parametrus:

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

Arī importēsim hook useLoaderData priekš datu izmantošanas, kas iegūti no loader:

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

Lietosim useLoaderData, attiecīgi aizstājot rindu ar objekta product izveidi funkcijas Product sākumā ar sekojošo:

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

Un, protams, nedaudz mainīsim mūsu izmēstu, jo mēs noņēmām veco objektu product. Aizstāsim rindkopu saturu:

routes/product.jsx<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Uz sekojošo:

routes/product.jsx<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

Mums atliek atvērt main.jsx un pievienot tur importu loader, nosauksim to par productLoader:

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

Un norādīt to kā loader produkta lapas maršruta objektam, pievienojot to children pēc īpašības element:

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

Viss, ar datu ielādi produkta lapai mēs esam tikuši galā! Tiesa, ielādēt pagaidām nav ko. Palaidiet līdzekli, pievienojiet produktus un noklikšķiniet uz tiem sarakstā, lai pārliecinātos, ka viss darbojas.