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

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

import { getProduct } from '../forStorage';

დავწეროთ მიმღების ფუნქცია loader იმპორტის შემდეგ და ფუნქციის Product წინ. გადავცეთ მას URL პარამეტრები:

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

ასევე გავიტანოთ ჰუკი useLoaderData მიმღების მიერ მიღებული მონაცემების გამოსაყენებლად:

import { useLoaderData } from 'react-router-dom';

გამოვიყენოთ useLoaderData, შესაბამისად ჩავანაცვლოთ სტრიქონი ობიექტის product შექმნით ფუნქციის Product დასაწყისში შემდეგით:

const { product } = useLoaderData();

და, რა თქმა უნდა, ცოტა შევცვალოთ ჩვენი ვერსტკა, რადგან nos წავუშალეთ ძველი ობიექტი product. შევცვალოთ აბზაცების შინაარსი:

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

შემდეგით:

<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:

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

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

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

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

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