Adăugarea datelor în React Router

În lecțiile anterioare am pregătit încărcătorul și descărcarea datelor pentru o anumită rută din depozit. Să facem cunoștință acum pe exemplu aplicației noastre cum să adăugăm un produs nou și să scriem datele lui în depozit.

Să deschidem fișierul root.jsx și să adăugăm în layout un buton pentru adăugarea noului produs înainte de nav, împachetându-l în tag-ul formular. De asemenea să împachetăm acum butonul și lista noastră în încă un div cu #menu. Layout-ul va arăta acum așa:

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>
);

Dacă acum intrăm în fila 'Rețea' a panoului dezvoltatorului, iar apoi apăsăm pe butonul nostru, vom vedea o cerere eronată a documentului către server. Cu ajutorul React Router vom folosi din nou rutarea pe partea clientului, excluzând cererea către server.

Să schimbăm pentru aceasta tag-ul form cu componenta Form React Router. Să adăugăm pentru început importul Form:

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

Acum să înlocuim tag-urile form în bucata de cod:

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

Reîncărcați aplicația noastră și verificați din nou panoul dezvoltatorului. Să apăsăm butonul de adăugare produs - acum cererea către server nu mai există (momentan nu acordați atenție erorii).

Luați aplicația creată de dumneavoastră în sarcinile din lecțiile anterioare. Folosind materialele lecției, corectați layout-ul funcției Root, adăugați un buton pentru adăugarea studentului în tag-ul form. Asigurați-vă că la apăsarea butonului are loc o cerere către server.

Iar acum înlocuiți tag-ul form, cu componenta Form. Asigurați-vă că la apăsarea butonului de adăugare a studentului cererea către server nu este trimisă.