დატას მიმღების მიღება URL პარამეტრებიდან React Router-ში

წინა გაკვეთილზე nos დავწერეთ ფუნქცია პროდუქტის გვერდის მონაცემების მისაღებად, მოდით გავიტანოთ getProduct ფაილში product.jsx:

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

დავწეროთ მიმღების ფუნქცია loader იმპორტის შემდეგ და ფუნქციის Product წინ. გადავცეთ მას 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();

და, რა თქმა უნდა, ცოტა შევცვალოთ ჩვენი ვერსტკა, რადგან nos წავუშალეთ ძველი ობიექტი 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>

nos დაგვრჩა გავხსნათ main.jsx და დავამატოთ იქ loader-ის იმპორტი, დავარქვათ მას productLoader:

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

და ჩავწეროთ იგი როგორც მიმღები პროდუქტის გვერდის მარშრუტის ობიექტისთვის, დავამატოთ იგი children-ში თვისების element შემდეგ:

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

ესე იგი, გვერდის მონაცემების ჩატვირთვასთან დავსახიხრდით! მაგრამ, ჩატვირთვა ჯერ არაფერი გვაქვს. გაუშვით აპლიკაცია, დაამატეთ პროდუქტები და დააწკაპუნეთ მათ სიაში, რათა დარწმუნდეთ, რომ ყველაფერი მუშაობს.