React Router හි දත්ත සංස්කරණය සඳහා මාර්ගයක් නිර්මාණය කිරීම

පසුගිය පාඩමේදී, අපි වෙනම React කොම්පොනන්ටයක් වන EditProduct තුළ සංස්කරණ පෝරමයක් නිර්මාණය කළෙමු.

දැන් අපි ආයාත කිරීම් වලට පසුව සහ EditProduct ශ්‍රිතයට පෙර, නව මාර්ගය සඳහා ලෝඩර් ශ්‍රිතය ලියන්නෙමු. එය product.jsx හි ඇති ආකාරයටම වනු ඇත. ශ්‍රිතයට URL පරාමිති ලබා දෙනු ලබන අතර ඉන්පසු අපි නිෂ්පාදනය එහි id භාවිතයෙන් ලබා ගන්නෙමු:

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

getProduct අපි forStorage.js වෙතින් ආයාත කරමු:

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

දැන් අපි අපේ main.jsx විවෘත කර අප විසින් නිර්මාණය කරන ලද කොම්පොනන්ටය EditProduct සහ ලෝඩර් ආයාත කරමු:

import EditProduct, { loader as editProductLoader } from './routes/edit';

ඉන්පසු නිෂ්පාදනය සඳහා වන මාර්ගයට පසුව තුරන්ම, සංස්කරණය සඳහා වන මාර්ග වස්තුව children අරාවට එකතු කරමු:

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

දැන් අපි ඇප්ලිකේෂනය දියත් කර, නිෂ්පාදනයක් නිර්මාණය කර, එය මත ක්ලික් කර, පසුව සංස්කරණ බොත්තම මත ක්ලික් කර අපගේ පෝරමය දකින්නෙමු.

එකම කාරණය, අපට තවත් කළ යුතුව ඇත්තේ පෝරමයේ ක්ෂේත්‍රවලට සංස්කරණයට පෙර වත්මන් දත්ත පූරණය වී ඇති බවට සහතික කිරීමයි. මේ සඳහා අපි edit.jsx තුළට useLoaderData හුක් එක ආයාත කරමු:

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

සහ එය EditProduct ශ්‍රිතය තුළ ලෝඩර් වලින් දත්ත ලබා ගැනීමට යොදා ගනිමු. return විධානයට පෙර එය එකතු කරමු:

const { product } = useLoaderData();

දැන් එක් එක් ආදාන ටැගයට defaultValue ගුණාංගය එක් කරමු එක් එක් ආදානය සඳහා අදාළ අගයන් සමඟ. උදාහරණයක් ලෙස, පළමු ආදානය දැන් මේ ආකාරයෙන් පෙනෙනු ඇත:

<input
	placeholder="නම"
	type="text"
	name="name"
	defaultValue={product.name}
/>

ඉතිරි ආදාන දෙක සඳහා අගයන් පිළිවෙලින් 'product.cost' සහ 'product.amount' වේ. ඇත්ත වශයෙන්ම, දැනට අපගේ පෝරමයේ දත්ත නොමැත.

පෙර පාඩම් සඳහා වන කාර්යයන්හිදී ඔබ විසින් නිර්මාණය කරන ලද ඇප්ලිකේෂනය ගන්න. පාඩමේ ද්‍රව්‍ය භාවිතා කරමින්, ශිෂ්‍ය දත්ත සංස්කරණය සඳහා වන මාර්ගය සඳහා edit.jsx තුළ loader ශ්‍රිතය නිර්මාණය කරන්න.

children අරාවට සංස්කරණය සඳහා වන මාර්ග වස්තුව එකතු කරන්න.

ඔබගේ EditStudent ශ්‍රිතය සඳහා පාඩමේ අවශ්‍ය කේතය එකතු කරන්න.