Membuat Rute untuk Mengedit Data di React Router

Pada pelajaran sebelumnya, kita membuat formulir untuk mengedit di komponen React terpisah EditProduct.

Sekarang mari kita tulis fungsi loader untuk rute baru tepat setelah impor dan sebelum fungsi EditProduct. Fungsi ini akan sama seperti di product.jsx. Ke dalam fungsi akan diteruskan parameter URL dan kemudian kita akan mendapatkan produk berdasarkan id-nya:

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

Impor getProduct dari forStorage.js:

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

Sekarang kita akan membuka main.jsx dan mengimpor komponen yang telah kita buat EditProduct dan loader-nya:

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

Kemudian tambahkan ke dalam array children objek rute untuk mengedit tepat setelah rute untuk produk:

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

Sekarang jalankan aplikasi, buat sebuah produk, klik padanya, lalu pada tombol edit dan kita akan melihat formulir kita.

Satu hal lagi yang perlu kita lakukan adalah memastikan bahwa di field formulir sebelum mengedit, data saat ini sudah dimuat. Untuk ini kita perlu mengimpor hook useLoaderData ke dalam edit.jsx:

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

Dan terapkan untuk mendapatkan data dari loader di fungsi EditProduct. Tambahkan sebelum perintah return:

const { product } = useLoaderData();

Sekarang tambahkan ke setiap tag input atribut defaultValue dengan nilai yang sesuai untuk setiap input. Misalnya, input pertama sekarang akan terlihat seperti ini:

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

Untuk dua input yang tersisa, nilainya akan berturut-turut adalah 'product.cost' dan 'product.amount'. Namun sejauh ini data di formulir kita belum ada.

Ambil aplikasi yang Anda buat dalam tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, buat fungsi loader di edit.jsx untuk rute mengedit data mahasiswa.

Tambahkan ke dalam array children objek rute untuk mengedit.

Tambahkan untuk fungsi EditStudent Anda kode yang diperlukan seperti dalam pelajaran.