React Router'da Rota için Veri Yükleyici

Önceki derste, verileri depodan çıkardık. Şimdi bu verilerin rota elemanına yüklenmesi gerekiyor. Bunun için bir yükleyici (loader) fonksiyonu kullanılır. Şimdi bu fonksiyonu oluşturacağız.

root.jsx dosyasını açalım, buraya forStorage.js dosyasından getProducts import satırını ekleyelim:

import { getProducts } from '../forStorage'

Hemen import satırlarından sonra ve Root fonksiyonundan önce, getProducts aracılığıyla depodan ürün verilerini bize döndürecek olan loader fonksiyonunun kodunu yazalım. Aslında bu tür fonksiyonlar ayrı bir dosyada yazılmalıdır, ancak biz biraz tembellik edeceğiz, bu yüzden uyarıyı dikkate almayın:

export async function loader() {
	const products = await getProducts();
	return { products };
}

Şimdi yükleyicimizin import işlemini main.jsx dosyasına ekleyelim. Bu yükleyici kök için olacak, bu nedenle adını rootLoader koyalım:

import Root, { loader as rootLoader } from './routes/root';

Ve onu rota nesnemize loader özelliğine ekleyelim:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
]);

Önceki derslerdeki görevlerde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, root.jsx dosyasında öğrenci verilerini yüklemek için bir loader fonksiyonu yazın ve onu main.jsx dosyasındaki rota nesnesine ekleyin.