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:

routes/edit.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

Importera getProduct från forStorage.js:

routes/edit.jsximport { getProduct } from '../forStorage';

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

main.jsximport 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:

main.jsxchildren: [
  {
    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:

routes/edit.jsximport { 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:

routes/edit.jsxconst { 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:

routes/edit.jsx<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.