Penggunaan Data yang Diperoleh Pemuatan dalam React Router

Dalam pelajaran lepas, kami memperoleh data dari penyimpanan menggunakan loader. Untuk menggunakan data ini, kami menggunakan hook useLoaderData. Mari buka fail root.jsx dan tambahkan hook dalam import:

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

Dalam fungsi Root, kami kini akan memperoleh data dalam pemalar products dan bekerja dengannya. Jika kami mempunyai produk, senarai akan dipaparkan, jika tidak, kami akan output dalam perenggan 'no products here ...'. Dalam tag nav kami kini menggunakan gelung piawai untuk output produk yang diperoleh. Setiap elemen akan dibungkus dalam komponen Link dan alamat akan untuk setiap satu (kami akan bincangkan ini kemudian). Oleh itu, jika produk tidak mempunyai nama, 'Unnamed' akan dipaparkan secara lalai. Jadi, dengan mengambil kira perkara di atas, kini kod kami untuk fungsi Root akan 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 kami mulakan semula aplikasi sekarang dan pergi ke halaman utama, kami akan lihat hanya 'no products here ...', kerana tiada produk dalam penyimpanan yang kami masukkan lagi.

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Menggunakan bahan pelajaran, tambahkan paparan data yang diperoleh dari pemuat dengan pelajar, seperti yang diterangkan dalam pelajaran.