React Router-da URL parametrler boýunça ýükleýjiniň maglumatlaryny almak

Öňki sapakda biz önümiň sahypasy üçin maglumat alyş funksiýasyny ýazdyk, geliň getProduct funksiýasyny product.jsx faýlyna import edeliň:

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

Import-dan soň we Product funksiýasyndan öň derrew loader ýüklemek funksiýasyny ýazaýyň. Oňa URL parametrlerini geçiriň:

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

Şeýle hem, ýüklenen maglumatlary ulanmak üçin useLoaderData gäbini import edeliň:

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

useLoaderData ulanalyň, degişlilikde Product funksiýasynyň başynda product obyektini döretýän setiri şuňa çalyşalyň:

const { product } = useLoaderData();

We, elbetde, biz köne product obyektini aýyranymyz üçin wertinkamy biraz üýtgetmeli. Abzaslaryň mazmunyny çalyşalyň:

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

Şuňa:

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

Bizä main.jsx açmak we oňa loader import etmek galdy, ony productLoader diýip atlandyralyň:

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

We ony önüm sahypasy üçin ýol objektiň ýüklemegi hökmünde ýazmaly, onu children içine element hojalygyndan soň goşmaly:

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

Hemme zady, sahypa üçin maglumat ýüklemek bilen işimiz gutardy! Eýýäm, bize ýüklemek üçin zat ýok. Işledişi ýygtyýarlyk üçin programmany işlediň, önümleri goşuň we hemmesiniň işleýändigine göz ýetirmek üçin sanawyň üstünde basyp görüň.

Öňki sapaklaryň wezipelerinde döreden programmanyňyzy alyň. Sapagyň materiallaryndan peýdalanyp, loader amala aşyryň, ony birikdiriň, talyp sahypasy üçin onuň maglumatlaryny ulanmagyňyzy amala aşyryň.