Datu izmantošana, kas iegūti ielādētājā React Router

Iepriekšējā nodarbībā mēs ieguvām datus no krātuves, izmantojot loader. Lai izmantotu šos datus, mēs izmantosim āķi useLoaderData. Atveram failu root.jsx un pievienosim āķi importam:

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

Funkcijā Root mēs tagad iegūsim datus konstante products un strādāsim ar to. Ja mums ir kādi produkti, tad saraksts tiks parādīts, ja nav, tad izvadīsim rindkopā 'no products here ...'. Tagā nav mēs tagad izmantojam standarta ciklu iegūto produktu izvadei. Katrs elements tiks ietīpts komponentē Link un adrese būs katram savs (par to mēs runāsim vēlāk). Attiecīgi, ja produktam nav nosaukuma, tad tiks izvadīts 'Unnamed' pēc noklusējuma. Tātad, ņemot vērā iepriekš minēto, tagad mūsu kods funkcijai Root būs šāds:

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>
	);
}

Ja mēs tagad restartēsim lietotni un dosimies uz galveno lapu, tad redzēsim tikai 'no products here ...', jo nekādi produkti krātuve mēs vēl neesam ievietojuši.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, pievienojiet no ielādētāja iegūto datu parādīšanu ar studentiem, kā aprakstīts nodarbībā.