Skapa en rutt för att redigera data i React Router

I förra lektionen skapade vi ett formulär för redigering i en separat React komponent EditProduct.

Låt oss nu skriva en laddarfunktion för den nya rutten direkt efter importen och före funktionen EditProduct. Den kommer att vara likadan som i product.jsx. I funktionen kommer URL-parametrar att skickas och sedan kommer vi att hämta produkten efter dess id:

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

Importera getProduct från forStorage.js:

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

Och nu öppnar vi vår main.jsx och importerar vår skapade komponent EditProduct och laddaren:

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

Lägg sedan till i arrayen children ett ruttobjekt för redigering direkt efter rutten för produkten:

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

Starta nu applikationen, skapa en produkt, klicka på den och sedan på redigeringsknappen och se vårt formulär.

Det enda, vi behöver också göra så att i formulärfälten före redigering laddas nuvarande data in. För detta importerar vi i edit.jsx hooken useLoaderData:

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

Och använder den för att få data från laddaren i funktionen EditProduct. Lägg till den före kommandot return:

const { product } = useLoaderData();

Lägg nu till i varje input-tagg attributet defaultValue med motsvarande värden för varje input. Till exempel, den första inputen kommer nu att se ut så här:

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

För de två återstående inputarna kommer värdena att vara respektive 'product.cost' och 'product.amount'. Fast för nu är det inga data i formuläret vi har.

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd lektionens material, skapa en funktion loader i edit.jsx för rutten för att redigera studentdata.

Lägg till i arrayen children ett objekt för redigeringsrutten.

Lägg till för din funktion EditStudent den kod som krävs i lektionen.