Penggunaan Data yang Diperoleh Loader di React Router

Pada pelajaran sebelumnya, kita memperoleh data dari penyimpanan menggunakan loader. Untuk menggunakan data tersebut, kita akan menggunakan hook useLoaderData. Mari buka file root.jsx dan tambahkan hook ke dalam impor:

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

Dalam fungsi Root, kita sekarang akan mendapatkan data ke dalam konstanta products dan bekerja dengannya. Jika kita memiliki produk, maka daftar akan ditampilkan; jika tidak, kita akan menampilkan dalam paragraf 'no products here ...'. Dalam tag nav kita sekarang menggunakan loop standar untuk menampilkan produk yang diperoleh. Setiap elemen akan dibungkus dalam komponen Link dan setiap tautan akan memiliki alamatnya sendiri (kita akan membicarakannya nanti). Oleh karena itu, jika produk tidak memiliki nama, maka 'Unnamed' akan ditampilkan secara default. Jadi, dengan mempertimbangkan hal di atas, kode kita untuk fungsi Root sekarang akan menjadi seperti ini:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

Jika kita sekarang me-restart aplikasi dan membuka halaman beranda, kita hanya akan melihat 'no products here ...', karena belum ada produk yang dimasukkan ke dalam penyimpanan.

Ambil aplikasi yang Anda buat dalam tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran, tambahkan tampilan data siswa yang diperoleh dari loader, seperti yang dijelaskan dalam pelajaran.