Загрузчык даных для маршруту ў 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: '/by/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
]);

Вазьміце прыкладанне, створанае вамі ў заданнях да мінулых урокаў. Карыстаючыся матэрыяламі ўрока, напішыце ў файле root.jsx функцыю loader для загрузкі даных студэнтаў і дадайце яе ў аб'ект маршруту ў main.jsx.