Mendapatkan Data Loader dari Parameter URL di React Router

Pada pelajaran sebelumnya, kita menulis fungsi untuk mendapatkan data halaman produk, mari impor getProduct di file product.jsx:

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

Tulis fungsi loader loader tepat setelah impor dan sebelum fungsi Product. Berikan parameter URL kepadanya:

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

Juga impor hook useLoaderData untuk menggunakan data yang didapatkan oleh loader:

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

Terapkan useLoaderData, dengan sesuai mengganti baris dengan pembuatan objek product di awal fungsi Product dengan yang berikut:

const { product } = useLoaderData();

Dan, tentu saja, kita akan ubah sedikit markup kita karena kita menghapus objek lama product. Ganti isi paragraf:

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Menjadi berikut:

<p>Nama: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Biaya: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Jumlah: {product.amount ? product.amount : <i>unknown</i>}</p>

Kita tinggal membuka main.jsx dan menambahkan impor loader ke sana, sebut saja productLoader:

import Product, {
	loader as productLoader,
} from './routes/product';

Dan tuliskan itu sebagai loader untuk objek rute halaman produk, menambahkannya ke children setelah properti element:

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

Selesai, dengan memuat data untuk halaman produk kita sudah selesaikan! Namun, tidak ada yang bisa dimuat untuk saat ini. Jalankan aplikasi, tambahkan beberapa produk dan klik pada mereka di dalam daftar untuk memastikan semuanya bekerja.

Ambil aplikasi yang dibuat oleh Anda di tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran, implementasikan loader, sambungkanlah, gunakanlah data darinya untuk halaman dengan siswa.