URL Parametreleri ile Yükleyici Verilerini Alma React Router'da

Önceki derste, ürün sayfası verilerini almak için bir fonksiyon yazdık, product.jsx dosyasına getProduct'ı içe aktaralım:

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

İçe aktarmadan hemen sonra ve Product fonksiyonundan önce loader yükleyici fonksiyonunu yazalım. URL parametrelerini ona iletilim:

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

Ayrıca, yükleyici tarafından alınan verileri kullanmak için useLoaderData kancasını içe aktaralım:

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

useLoaderData'ı uygulayalım, buna bağlı olarak Product fonksiyonunun başındaki product nesnesini oluşturan satırı aşağıdakiyle değiştirelim:

const { product } = useLoaderData();

Ve elbette, eski product nesnesini kaldırdığımız için biraz şablonumuzu değiştireceğiz. Paragrafların içeriğini değiştirelim:

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

Şununla:

<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

main.jsx'yi açıp oraya loader'ı içe aktarmamız kaldı, ona productLoader diyelim:

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

Ve onu ürün sayfası route nesnesi için yükleyici olarak belirlememiz gerekiyor, children içine element özelliğinden sonra ekleyelim:

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

Hepsi bu, ürün sayfası için veri yükleme ile işimiz bitti! Gerçi, şu an için yükleyecek bir şeyimiz yok. Uygulamayı başlatın, ürünler ekleyin ve her şeyin çalıştığından emin olmak için listede onlara tıklayın.

Önceki derslerin görevlerinde oluşturduğunuz uygulamayı alın. Dersteki materyalleri kullanarak, öğrenci sayfası için loader'ı uygulayın, bağlayın, ondan gelen verileri kullanın.