Учитавање података за руту у React Router-у

У претходном часу смо извлекли податке о производима из складишта. Сада ове податке треба учитати у елемент руте. За то се користи функција учитавача (loader). Сада ћемо је створити.

Отворимо root.jsx, додајмо овде ред за увоз getProducts из forStorage.js:

import { getProducts } from '../forStorage'

Одмах након редова за увоз и пре функције Root напишимо код функције loader, која ће преко getProducts враћати нам податке о производима из складишта. Уопште овакве функције треба писати у посебном фајлу, али ми ћемо мало полињарити, па не обраћајте пажњу на упозорење:

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

Хајде сада да додамо увоз нашег учитавача у main.jsx. Овај учитавач ће код нас бити за корен, па ћемо га назвати rootLoader:

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

И додајмо га у наш објекат руте у својство loader:

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

Узмите апликацију коју сте креирали у задацима за претходне часове. Користећи се материјалом часа, напишите у фајлу root.jsx функцију loader за учитавање података о студентима и додајте је у објекат руте у main.jsx.