Dodavanje podataka u React Router

Na prethodnim lekcijama smo pripremili loader i isporuku podataka za određenu rutu iz skladišta. Hajde sada da se upoznamo na primeru naše aplikacije kako da dodamo novi proizvod i zapišemo njegove podatke u skladište.

Otvorimo fajl root.jsx i dodajmo u layout dugme za dodavanje novog proizvoda ispred nav, umotavajući ga u form tag. Takođe ćemo sada umotati i dugme i naš spisak u još jedan div sa #menu. Layout će sada izgledati ovako:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">dodaj proizvod</button>
			</form>
			{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>nema proizvoda ovde ...</i>
			</p>
			)}
		</div>

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

Ako sada odemo na karticu 'Mreža' pregledača, a zatim kliknemo na naše dugme, videćemo pogrešan zahtev dokumenta ka serveru. Pomoću React Router-a ponovo ćemo iskoristiti rutiranje na strani klijenta, isključujući zahtev ka serveru.

Hajde da za ovo promenimo tag form u komponentu Form React Router-a. Dodajmo za početak import Form:

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

Sada zamenimo tagove form u delu koda:

<Form method="post">
	<button type="submit">dodaj proizvod</button>
</Form>

Ponovo učitajte našu aplikaciju i pogledajte ponovo pregledač. Kliknite na dugme za dodavanje proizvoda - sada zahteva ka serveru više nema (na grešku za sada nemojte obraćati pažnju).

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći se materijalima lekcije, ispravite izgled funkcije Root, dodajte dugme za dodavanje studenta u tagu form. Uverite se da pri pritisku dugmeta dolazi do zahteva ka serveru.

A sada zamenite tag form, komponentom Form. Uverite se da pri pritisku na dugme za dodavanje studenta zahtev ka serveru ne biva poslat.