React Router'da Veri Düzenleme için Rota Oluşturma

Önceki derste, ayrı bir React bileşeninde EditProduct düzenleme formu oluşturduk.

Şimdi, içe aktarmalardan hemen sonra ve EditProduct işlevinden önce yeni bir rota için yükleyici işlevi yazalım. Bu, product.jsx dosyasındakiyle aynı olacak. İşleve URL parametreleri iletilecek ve ardından ürünü id değerine göre alacağız:

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

getProduct fonksiyonunu forStorage.js dosyasından içe aktaralım:

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

Şimdi main.jsx dosyamızı açıp oluşturduğumuz EditProduct bileşenini ve yükleyiciyi içe aktaralım:

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

Ardından, children dizisine ürün rotasından hemen sonra düzenleme için bir rota nesnesi ekleyelim:

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

Şimdi uygulamayı başlatalım, bir ürün oluşturalım, üzerine tıklayalım ve ardından düzenleme butonuna tıklayarak formumuzu görelim.

Tek yapmamız gereken, form alanlarında düzenlemeden önce mevcut verilerin yüklenmiş olmasını sağlamak. Bunun için edit.jsx dosyasına useLoaderData kancasını içe aktaralım:

routes/edit.jsximport { Form, useLoaderData } from 'react-router-dom';

Ve EditProduct işlevinde yükleyiciden veri almak için kullanalım. return komutundan önce ekleyelim:

routes/edit.jsxconst { product } = useLoaderData();

Şimdi her input etiketine, her input için karşılık gelen değerlere sahip defaultValue niteliğini ekleyelim. Örneğin, ilk input artık şöyle görünecek:

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

Kalan iki input için değerler sırasıyla 'product.cost' ve 'product.amount' olacak. Ancak şu anda formda verilerimiz yok.