Pridávanie dát do React Router

V predchádzajúcich lekciách sme pripravili loader a odstránenie dát pre konkrétnu trasu z úložiska. Poďme sa teraz zoznámiť na príklade našej aplikácie ako pridať nový produkt a zapísať jeho dáta do úložiska.

Otvorme súbor root.jsx a pridajme do layoutu tlačidlo na pridanie nového produktu pred nav, zabalením do form tagu. Tiež teraz zabalíme tlačidlo a náš zoznam do ďalšieho divu s #menu. Layout bude teraz vyzerať takto:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">add product</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>no products here ...</i>
			</p>
			)}
		</div>

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

Ak teraz pôjdeme na kartu 'Sieť' vývojárskej konzoly a potom stlačíme naše tlačidlo, uvidíme chybnú požiadavku dokumentu na server. S použitím React Router opäť využijeme smerovanie na strane klienta, čím sa vyhneme požiadavke na server.

Poďme na to zmeniť tag form na komponent Form React Router. Pridajme na začiatok import Form:

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

Teraz nahraďme tagy form v kúsku kódu:

<Form method="post">
	<button type="submit">add product</button>
</Form>

Obnovte našu aplikáciu a pozrite sa znova na vývojársku konzolu. Stlačme tlačidlo pridania produktu - teraz už žiadna požiadavka na server nie je (na chybu zatiaľ neberte ohľad).

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použitím materiálov lekcie opravte layout funkcie Root, pridajte tlačidlo na pridanie študenta v tagu form. Uistite sa, že pri stlačení tlačidla dochádza k požiadavke na server.

A teraz nahraďte tag form, komponentom Form. Uistite sa, že pri stlačení na tlačidlo pridania študenta sa požiadavka na server neodosiela.