Роҳбар дар 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 илова кунед.