Oprettelse af rute til dataredigering i React Router

I den forrige lektion oprettede vi en form til redigering i en separat React komponent EditProduct.

Lad os nu skrive en loader-funktion for den nye rute lige efter importen og før funktionen EditProduct. Den vil være den samme som i product.jsx. I funktionen vil URL-parametre blive sendt og derefter vil vi hente produktet efter dets id:

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

Importer getProduct fra forStorage.js:

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

Nu åbner vi vores main.jsx og importerer den komponent, vi har oprettet, EditProduct og loaderen:

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

Tilføj derefter i arrayet children et ruteobjekt til redigering lige efter ruten for produktet:

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

Lad os nu starte applikationen, oprette et produkt, klikke på det og derefter på redigeringsknappen og se vores lille formular.

Den eneste ting, vi også skal gøre, er at sørge for, at de aktuelle data er indlæst i formularfelterne før redigering. For at gøre dette importerer vi i edit.jsx hook'et useLoaderData:

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

Og anvender det til at hente data fra loaderen i funktionen EditProduct. Tilføj det før kommandoen return:

const { product } = useLoaderData();

Lad os nu tilføje i hvert input-tag attributten defaultValue med de tilsvarende værdier for hvert input. For eksempel, det første input vil nu se sådan ud:

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

For de to resterende input vil værdierne være henholdsvis 'product.cost' og 'product.amount'. Men indtil videre har vi ingen data i formularen.

Tag den applikation, du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen til at oprette en funktion loader i edit.jsx for ruten til redigering af studerendes data.

Tilføj i arrayet children et objekt for redigeringsruten.

Tilføj for din funktion EditStudent den kode, der kræves i lektionen.