Adatok hozzáadása a React Routerhoz

Az előző leckéken elkészítettük az adatbetöltőt és az adatok egy adott útvonalon történő kirakását a tárolóból. Ismerkedjünk most meg példaalkalmazásunk segítségével, hogyan adhatunk hozzá új terméket és írhatjuk be az adatait a tárolóba.

Nyissuk meg a root.jsx fájlt és adjunk hozzá a elrendezéshez egy gombot az új termék hozzáadásához a nav elé, egy form tagbe becsomagolva. Mostantól csomagoljuk be a gombot és listánkat egy még egy divbe #menu azonosítóval. Az elrendezés most így fog kinézni:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">termék hozzáadása</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Név nélküli</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>nincsenek termékek itt ...</i>
			</p>
			)}
		</div>

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

Ha most megnézzük a 'Hálózat' fület a fejlesztői eszköztárban, majd megnyomjuk a gombunkat, akkor egy hibás dokumentumkérést fogunk látni a szerver felé. A React Router segítségével ismét kihasználjuk az kliens oldali útválasztást, kizárva a szerver felé irányuló kérést.

Cseréljük le ehhez a form taget a React Router Form komponensére. Adjuk hozzá kezdetben a Form importját:

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

Most cseréljük le a form tag-eket a kódrészletben:

<Form method="post">
	<button type="submit">termék hozzáadása</button>
</Form>

Töltsd újra alkalmazásunkat és nézd meg újra a fejlesztői eszköztárt. Nyomjuk meg a termék hozzáadása gombot - most már nincs kérés a szerver felé (egyelőre ne foglalkozz a hibával).

Vegyétek elő azt az alkalmazást, amit az előző leckékhez tartozó feladatokban készítettetek. A lecke anyagát felhasználva javítsátok ki a Root függvény elrendezését, adjatok hozzá egy gombot a hallgató hozzáadásához egy form tagben. Győződjetek meg arról, hogy a gomb megnyomásakor kérés indul a szerver felé.

Most pedig cseréljétek le a form taget, a Form komponensre. Győződjetek meg arról, hogy a hallgató hozzáadása gomb megnyomásakor nem indul kérés a szerver felé.