Креирање руте за уређивање података у Реакт Роутер-у

На прошлом часу креирали смо форму за уређивање у одвојеном Реакт компоненту 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="name"
	type="text"
	name="name"
	defaultValue={product.name}
/>

За два преостала инпута вредности ће бити одговарајуће 'product.cost' и 'product.amount'. Истина, за сада података у форми немамо.

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

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

Додајте за вашу функцију EditStudent захтевани код са часа.