Shtimi i të Dhënave në React Router

Në mësimet e mëparshme ne përgatitëm një loader dhe shkarkimin e të dhënave për një rrugë të caktuar nga depoja. Tani le të njihemi në shembullin e aplikacionit tonë se si të shtojmë një produkt të ri dhe të shkruajmë të dhënat e tij në depo.

Le të hapim skedarin root.jsx dhe të shtojmë në layout një buton për të shtuar një produkt të ri përpara nav, duke e mbështjellë atë në një tag forme. Gjithashtu le të mbështjellim tani butonin dhe listën tonë në një tjetër div me #menu. Layout-i tani do të duket kështu:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">shto produkt</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>I paemër</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>asnjë produkt këtu ...</i>
			</p>
			)}
		</div>

		<div id="product">
			<Outlet />
		</div>
	</div>
);

Nëse tani shkojmë në skedën 'Rrjeti' të panelit të zhvilluesit, dhe më pas shtypim butonin tonë, do të shohim një kërkesë të gabuar të dokumentit në server. Me React Router ne përsëri do të përdorim routing në anën e klientit, duke përjashtuar kërkesën në server.

Le ta ndryshojmë tag-un form në komponentin Form të React Router. Le të shtojmë për fillim import-in Form:

import { Form } from 'react-router-dom';

Tani le të zëvendësojmë tag-et form në pjesën e kodit:

<Form method="post">
	<button type="submit">shto produkt</button>
</Form>

Ringarkoni aplikacionin tonë dhe hidhni një sy përsëri në panelin e zhvilluesit. Le të shtypim butonin e shtimit të produktit - tani nuk ka më kërkesë në server (për momentin mos i kushtoni vëmendje gabimit).

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të mëparshme. Duke u përfituar nga materialet e mësimit, korrigjoni layout-in e funksionit Root, shtoni një buton për shtimin e studentit në tag-un form. Sigurohuni që kur shtypet butoni të ndodhë një kërkesë në server.

Dhe tani zëvendësoni tag-un form, me komponentin Form. Sigurohuni që gjatë shtypjes së butonit të shtimit të studentit të mos dërgohet kërkesë në server.