Kreiranje rute za uređivanje podataka u React Router

Na prošloj lekciji kreirali smo formu za uređivanje u zasebnom React komponentu EditProduct.

Hajde sada da napišemo funkciju loadera za novu rutu odmah posle importa i pre funkcije EditProduct. Ona će biti ista kao u product.jsx. U funkciju će biti prosleđeni URL parametri i zatim ćemo dobijati proizvod po njegovom id:

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

Importujemo getProduct iz forStorage.js:

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

A sada ćemo otvoriti naš main.jsx i importovati kreiranu komponentu EditProduct i loader:

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

Zatim dodajmo u niz children objekat rute za uređivanje odmah posle rute za proizvod:

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

Sada pokrenimo aplikaciju, kreirajmo proizvod, kliknimo na njega, a zatim na dugme za uređivanje i videćemo našu formicu.

Jedino, još treba da uradimo tako da u poljima forme pre uređivanja budu učitani trenutni podaci. Za ovo importujemo u edit.jsx hook useLoaderData:

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

I primenimo ga za dobijanje podataka iz loadera u funkciji EditProduct. Dodajmo ga pre komande return:

const { product } = useLoaderData();

Sada dodajmo u svaki tag input atribut defaultValue sa odgovarajućim vrednostima za svaki input. Na primer, prvi input sada će izgledati ovako:

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

Za dva preostala inputa vrednosti će biti redom 'product.cost' i 'product.amount'. Istina za sada podataka u formi mi nemamo.

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći se materijalima lekcije, kreirajte funkciju loader u edit.jsx za rutu uređivanja podataka studenta.

Dodajte u niz children objekat rute za uređivanje.

Dodajte za vašu funkciju EditStudent traženi u lekciji kod.