Datu pievienošana React Router

Iepriekšējās nodarbībās mēs sagatavojām ielādi un datu izgūšanu pa noteiktu maršrutu no krātuves. Tagad iepazīsimies ar mūsu lietotnes piemēru, kā pievienot jaunu produktu un ierakstīt tā datus krātuvē.

Atvērsim failu root.jsx un pievienosim izkārtojumā pogu jauna produkta pievienošanai pirms nav, ietverot to formāta tagā. Tāpat ietversim tagad pogu un mūsu sarakstu vēl vienā div ar #menu. Izkārtojums tagad būs izskatās šādi:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">pievienot produktu</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Nenosaukts</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>šeit nav produktu ...</i>
			</p>
			)}
		</div>

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

Ja mēs tagad ejam uz cilni 'Tīkls' izstrādātāju panelī un pēc tam nospiežam uz mūsu pogas, mēs redzēsim kļūdains pieprasījums dokumentam uz serveri. Izmantojot React Router mēs atkal izmantosim maršrutēšanu klienta pusē, izslēdzot pieprasījumu uz serveri.

Lai to izdarītu, mainīsim tagu form uz komponentu Form React Router. Pievienosim sākumā importu Form:

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

Tagad aizstājiet tagus form koda fragmentā:

<Form method="post">
	<button type="submit">pievienot produktu</button>
</Form>

Pārlādējiet mūsu lietotni un vēlreiz apskatiet izstrādātāja paneli. Nospiediet produkta pievienošanas pogu - tagad pieprasījuma uz serveri vairs nav (uz kļūdu pagaidām nepievērsiet uzmanību).

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, labojiet funkcijas Root izkārtojumu, pievienojiet pogu studenta pievienošanai tagā form. Pārliecinieties, ka nospiežot pogu tiek veikts pieprasījums uz serveri.

Un tagad aizstājiet tagu form ar komponentu Form. Pārliecinieties, ka nospiežot uz studenta pievienošanas pogas pieprasījums uz serveri netiek nosūtīts.