Krijimi i një rrugësimi për redaktimin e të dhënave në React Router

Në mësimin e kaluar, ne krijuam një formular për redaktim në një komponent të veçantë React EditProduct.

Tani le të shkruajmë funksionin e loader-it për rrugësimin e ri menjëherë pas importimeve dhe përpara funksionit EditProduct. Ai do të jetë i njëjtë si në product.jsx. Në funksion do të kalohen parametrat e URL-it dhe më pas do të marrim produktin sipas id të tij:

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

Le të importojmë getProduct nga forStorage.js:

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

Tani do të hapim main.jsx tonë dhe do të importojmë komponentin e krijuar nga ne EditProduct dhe loader-in:

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

Pastaj do të shtojmë në array-in children objektin e rrugës për redaktim menjëherë pas rrugës për produktin:

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

Tani le të startojmë aplikacionin, të krijojmë një produkt, të klikojmë mbi të, dhe pastaj mbi butonin e redaktimit dhe do të shohim formularin tonë.

E vetmja gjë, ne duhet gjithashtu ta bëjmë që në fushat e formularit përpara redaktimit të ngarkohen të dhënat aktuale. Për këtë ne do të importojmë në edit.jsx hook-un useLoaderData:

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

Dhe do ta aplikojmë atë për të marrë të dhënat nga loader-i në funksionin EditProduct. Le ta shtojmë atë para komandës return:

const { product } = useLoaderData();

Tani le të shtojmë në çdo tag input atributin defaultValue me vlerat përkatëse për çdo input. Për shembull, input-i i parë tani do të duket kështu:

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

Për dy input-et e mbetur vlerat do të jenë përkatësisht 'product.cost' dhe 'product.amount'. Megjithatë tani për tani nuk kemi të dhëna në formular.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, krijoni funksionin loader në edit.jsx për rrugësimin e redaktimit të të dhënave të studentit.

Shtoni në array-in children objektin e rrugës për redaktim.

Shtoni për funksionin tuaj EditStudent kodin e kërkuar në mësim.