Dodajanje podatkov v React Router

V prejšnjih lekcijah smo pripravili nalagalnik in izločitev podatkov po določeni poti iz shrambe. Poglejmo si zdaj na primeru naše aplikacije, kako dodati nov produkt in zapisati njegove podatke v shrambo.

Odprimo datoteko root.jsx in dodajmo v postavitev gumb za dodajanje novega produkta pred nav, in ga ovijmo v oznako forme. Prav tako ovijmo zdaj gumb in naš seznam v še en div z #menu. Postavitev bo zdaj izgledala takole:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">dodaj produkt</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Neimenovano</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>tukaj ni produktov ...</i>
			</p>
			)}
		</div>

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

Če zdaj gremo na zavihek 'Omrežje' razvojnega orodja in nato kliknemo na naš gumb, bomo videli napačno zahtevo dokumenta na strežnik. Z React Router bomo spet uporabili usmerjanje na strani odjemalca, s čimer izključimo zahtevo na strežnik.

Za to spremenimo oznako form v komponento Form React Routerja. Dodajmo za začetek uvoz Form:

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

Zdaj zamenjajmo oznake form v delčku kode:

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

Ponovno naložite našo aplikacijo in ponovno poglejte v razvojno orodje. Kliknimo gumb za dodajanje produkta - zdaj zahteve na strežnik ni (na napako za zdaj ne bodite pozorni).

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva lekcije popravite postavitev funkcije Root, dodajte gumb za dodajanje študenta v oznako form. Prepričajte se, da ob pritisku gumba pride do zahteve na strežnik.

In zdaj zamenjajte oznako form, z komponento Form. Prepričajte se, da ob pritisku na gumb za dodajanje študenta zahteva na strežnik ni poslana.