Opprettelse av rute for dataredigering i React Router

I forrige leksjon opprettet vi et skjema for redigering i en egen React- komponent EditProduct.

La oss nå skrive en loader-funksjon for den nye ruten rett etter importen og før funksjonen EditProduct. Den vil være den samme som i product.jsx. I funksjonen vil URL-parametere bli sendt og deretter vil vi hente produktet etter dets id:

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

Importer getProduct fra forStorage.js:

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

Og nå skal vi åpne vår main.jsx og importere komponenten vi opprettet EditProduct og loaderen:

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

Deretter legger vi til i arrayet children et ruteobjekt for redigering rett etter ruten for produktet:

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

La oss nå starte applikasjonen, opprette et produkt, klikke på det, og deretter på redigeringsknappen og se skjemaet vårt.

Det eneste, vi trenger også å gjøre så feltene i skjemaet har de nåværende dataene lastet inn før redigering. For dette importerer vi i edit.jsx hooken useLoaderData:

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

Og bruker den for å hente data fra loaderen i funksjonen EditProduct. Legg den til før kommandoen return:

const { product } = useLoaderData();

La oss nå legge til i hver input-tag attributten defaultValue med de tilsvarende verdiene for hver input. For eksempel, den første inputen vil nå se slik ut:

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

For de to gjenværende inputene vil verdiene vare henholdsvis 'product.cost' og 'product.amount'. Men foreløpig har vi ingen data i skjemaet.

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk materialet fra leksjonen, opprett en funksjon loader i edit.jsx for ruten for redigering av studentdata.

Legg til i arrayet children et objekt for redigeringsruten.

Legg til for din funksjon EditStudent den nødvendige koden som kreves i leksjonen.