Vytvorenie trasy pre editáciu dát v React Router

V minulej lekcii sme vytvorili formulár pre editáciu v samostatnej React komponente EditProduct.

Teraz napíšme funkciu loader pre novú trasu hneď po importe a pred funkciou EditProduct. Bude rovnaká ako v product.jsx. Do funkcie budú odovzdávané URL parametre a následne budeme získavať produkt podľa jeho id:

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

Importujme getProduct z forStorage.js:

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

A teraz otvoríme náš main.jsx a importujeme vytvorenú komponentu EditProduct a loader:

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

Potom pridajme do poľa children objekt trasy pre editáciu hneď po trase pre produkt:

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

Teraz spustíme aplikáciu, vytvoríme produkt, klikneme naň, a potom na tlačidlo editácie a uvidíme náš formulár.

Jediné, čo ešte potrebujeme urobiť, je zabezpečiť, aby v poliach formulára pred editáciou boli načítané aktuálne dáta. Na to importujeme v edit.jsx hook useLoaderData:

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

A aplikujeme ho na získanie dát z loadera v funkcii EditProduct. Pridajme ho pred príkaz return:

const { product } = useLoaderData();

Teraz pridajme do každého tagu input atribút defaultValue so zodpovedajúcimi hodnotami pre každý input. Napríklad, prvý input bude teraz vyzerať takto:

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

Pre dva zostávajúce inputy budú hodnoty zodpovedajúco 'product.cost' a 'product.amount'. Pravda, zatiaľ dáta vo formulári nemáme.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k minulým lekciám. Používajúc materiály lekcie, vytvorte funkciu loader v edit.jsx pre trasu editácie dát študenta.

Pridajte do poľa children objekt trasy pre editáciu.

Pridajte pre vašu funkciu EditStudent požadovaný kód z lekcie.