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>Атауы: {product.name}</p>
<p>Құны: {product.cost}</p>
<p>Саны: {product.amount}</p>

Мынаған:

routes/product.jsx<p>Атауы: {product.name ? product.name : <i>атаусыз</i>}</p>
<p>Құны: {product.cost ? product.cost : <i>белгісіз</i>}</p>
<p>Саны: {product.amount ? product.amount : <i>белгісіз</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,
  },
],

Барлығы, өнім бетінің деректерін жүктеумен біз айналыстық! Алайда, әзірше жүктейтін ештеңе жоқ. Қосымшаны іске қосыңыз, өнімдерді қосыңыз және тізімде оларды басу арқылы бәрі жұмыс істейтініне көз жеткізіңіз.