Креирање на рута за уредување на податоци во React Router

Во претходната лекција креиравме форма за уредување во посебен React компонент EditProduct.

Ајде сега да ја напишеме функцијата за loader за новата рута веднаш по импортите и пред функцијата 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 и loader-от:

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

Потоа ќе додадеме во array-от children објект на рутата за уредување веднаш по рутата за производот:

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

Сега ќе ја стартуваме апликацијата, ќе креираме производ, ќе кликнеме на него, а потоа на копчето за уредување и ќе ја видиме нашата форма.

Единствено, сè уште треба да направиме така што во полињата на формата пред уредувањето да се вчитаат тековните податоци. За ова ќе импортираме во edit.jsx hook-от useLoaderData:

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

И ќе го примениме за добивање на податоци од loader-от во функцијата EditProduct. Ќе го додадеме пред командата return:

const { product } = useLoaderData();

Сега ќе додадеме во секој таг input атрибут defaultValue со соодветните вредности за секој input. На пример, првиот input сега ќе изгледа вака:

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

За двата преостанати input-и вредностите ќе бидат соодветно 'product.cost' и 'product.amount'. Сега за сега податоците во формата ги немаме.

Земете ја апликацијата што ја креиравте во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, креирајте функција loader во edit.jsx за рутата за уредување на податоци за студентот.

Додадете во array-от children објект на рутата за уредување.

Додадете за вашата функција EditStudent потребниот код од лекцијата.