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 හි.