React Router-a maglumat goşmak

Öňki sapaklarda biz ýükleýjini taýýarladyk we ammaryň üsti bilen kesgitlenen marşruta boýunça maglumatlary boşatdyk. Indi göz öňüne getiriň, nusgada öz aplikasiýamyzyň üsti bilen täze önümi nädip goşmaly we onuň maglumatlaryny ammara nädip ýazmalydygyny tanşalyň.

root.jsx faýlyny açalyň we nav öňündäki täze önüm goşmak üçin düwmäni form tegi bilen gurup, maketa goşalyň. Şeýle hem, indi düwmäni we sanawymyzy ýene bir div bilen #menu bilen gurup çykaryň. Maket indi şuňa meňzer:

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

Eger indi developer paneliniň 'Sewbi' goşujysyna girseňiz, soňra bolsa biziň düwmämize bassaňyz, serwere ýalňyş sened haýyşyny görersiňiz. React Router bilen biz ýenede müşderi tarapyndaky marşrutlaşdyrmadan peýdalanyp, serwere haýyşy çykararys.

Bunun üçin form tegini React Router-üň Form komponentine çalyşalyň. Başlangyç üçin Form importyny goşalyň:

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

Indi kodyň bölegindäki form teglerini çalyşyň:

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

Aplikasiýamyzy ýenede ýükliň we developer paneline ýenede göz aýlaň. Önüm goşmak düwmesine basalyň - indi serwere haýyş ýok (ýalňyşlyga heniz üns bermäň).

Öňki sapaklardaky tabşyryklarda döreden aplikasiýaňyzy alyň. Sapak materyallaryndan peýdalanyp, Root funksiýasynyň wersiýasyny düzediň, form tegindäki talyp goşmak üçin düwmäni goşuň. Düwmä basylanda serwere haýyş ýüze çykýandygyna göz ýetiriň.

Indi bolsa form tegini, Form komponentine çalyşyň. Talyp goşmak düwmesine basylanda serwere haýyş iberilmeýändigine göz ýetiriň.