React Router-ում բեռնիչով ստացված տվյալների օգտագործումը

Նախորդ դասում մենք ստացանք տվյալներ պահեստից loader-ի միջոցով: Որպեսզի օգտագործենք այդ տվյալները, մենք կօգտագործենք useLoaderData կեռիկը: Բացենք root.jsx ֆայլը և ավելացնենք կեռիկը իմպորտում:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

Root ֆունկցիայում մենք այժմ կստանանք տվյալները products հաստատունի մեջ և կաշխատենք դրա հետ: Եթե ունենք որևէ ապրանքատեսակ, ապա ցանկը կցուցադրվի, եթե ոչ, ապա կտպենք 'no products here ...' պարբերությունում: nav թեգում մենք այժմ օգտագործում ենք ստանդարտ ցիկլ՝ ստացված ապրանքատեսակները ցուցադրելու համար: Յուրաքանչյուր տարր կփաթաթվի Link բաղադրիչի մեջ և հասցեն կլինի յուրաքանչյուրի համար իրա (դրա մասին կխոսենք ավելի ուշ): Համապատասխանաբար, եթե ապրանքատեսակը անուն չունի, ապա լռելյայն կցուցադրվի 'Unnamed': Այսպիսով, հաշվի առնելով վերը նշվածը, այժմ մեր կոդը Root ֆունկցիայի համար կլինի այսպես:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

Եթե հիմա վերագործարկենք հավելվածը և մտնենք գլխավոր էջ, ապա կտեսնենք միայն 'no products here ...', քանի որ որևէ ապրանքատեսակ դեռ չենք դրել պահեստում:

Վերցրեք նախորդ դասերին առաջադրանքներում ձեր ստեղծած հավելվածը: Օգտագործելով դասի նյութերը, ավելացրեք բեռնիչից ստացված տվյալների ցուցադրումը ուսանողների հետ, ինչպես նկարագրված է դասում: