Vytvoření trasy pro editaci dat v React Router

V minulé lekci jsme vytvořili formulář pro editaci v samostatné React komponentě EditProduct.

Nyní napišme funkci loaderu pro novou trasu hned po importu a před funkcí EditProduct. Bude stejná jako v product.jsx. Do funkce budou předány URL parametry a následně získáme produkt podle jeho id:

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

Importujeme getProduct z forStorage.js:

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

Nyní otevřeme náš main.jsx a importujeme vytvořenou komponentu EditProduct a loader:

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

Poté přidáme do pole children objekt trasy pro editaci hned po trase pro produkt:

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

Nyní spusťme aplikaci, vytvořme produkt, klikněme na něj a poté na tlačítko editace a uvidíme náš formulář.

Jediné, co ještě musíme udělat, je zajistit, aby v polích formuláře před editací byly načteny aktuální data. K tomu importujeme v edit.jsx hook useLoaderData:

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

A použijeme jej pro získání dat z loaderu ve funkci EditProduct. Přidejme jej před příkaz return:

const { product } = useLoaderData();

Nyní přidejme do každého tagu input atribut defaultValue s odpovídajícími hodnotami pro každý input. Například, první input bude nyní vypadat takto:

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

Pro zbývající dva inputy budou hodnoty 'product.cost' a 'product.amount'. Ovšem zatím data ve formuláři nemáme.

Vezměte aplikaci, kterou jste vytvořili v úkolech k minulým lekcím. Použijte materiály lekce a vytvořte funkci loader v edit.jsx pro trasu editace dat studenta.

Přidejte do pole children objekt trasy pro editaci.

Přidejte pro vaši funkci EditStudent požadovaný kód z lekce.