React Router'де URL параметрлери боюнча жүктөөчү маалыматтарын алуу

Акыркы сабакта биз продукт баракчасынын маалыматтарын алуу үчүн функция жаздык, келгиле файлдагы product.jsx импорт кылалы getProduct:

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 объектин түзгөн сапты төмөнкү менен алмаштырабыз:

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

Жана, албетте, биз эски product объектин жок кылганыбыз үчүн, версткабызды бир аз өзгөртөбүз. Абзацтардын мазмунун алмаштырабыз:

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

Төмөнкүгө:

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,
  },
],

Баары, продукт баракчасынын маалыматтарын жүктөө менен биз күрөшүп бүттүк! Бирок, бизде азырынча жүктөө үчүн эч нерсе жок. Колдонмоңузду иштетиңиз, продукттарды кошуп, аларды тизмеде басып көрүңүз, баары иштеп жатканына ынаныңыз.