React Router да URL параметрлар орқали юклагич маълумотларини олиш

Ўтган дарсда биз маҳсулот саҳифаси учун маълумот олиш функциясини ёзган эдик, келтириб чиқариш қиламиз getProduct файлдан product.jsx:

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

Келтириб чиқаришдан кейин ва функциядан олдин Product юклагич функциясини ёзамиз loader Унга URL параметрларини ўтказамиз:

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

Шунингдек, келтириб чиқариш қиламиз ҳук useLoaderData учун юклагич томонидан олинган маълумотлардан фойдаланиш:

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

Қўллаймиз useLoaderData, мос равишда объект яратиш сатрини алмаштирамиз product функциянинг бошланишида Product бу нarsaga:

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

Ва, албатта, бир оз ўзгартирамиз бизнинг верстканимиз, чунки биз эски объектни olib tashladik product. Абзацларнинг мазмунини алмаштирамиз:

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

Бу нarsaga:

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>

Бизга очиш қолди main.jsx ва унга келтириб чиқариш қўшиш loader, уни номлаймиз productLoader:

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

Ва уни ёзамиз юклагич сифатида маҳсулот саҳифаси учун маршрут объектининг қўшиш уни children ичига хоссадан кейин element:

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

Ҳаммаси, маҳсулот саҳифаси учун маълумотларни юклаш билан ишнимиз тугалди! Лекин, юзлаш учун ҳали ҳеч нарса йўқ. Иловани ишга туширинг, маҳсулотлар қўшинг ва уларни рўйхатда босиб, ҳаммаси ишлашига ишонч ҳосил қилинг.