Duomenų pridėjimas React Router

Ankstesnėse pamokose mes paruošėme įkėlimo įrenginį ir iškrovėme duomenis pagal tam tikrą maršrutą iš saugyklos. Dabar susipažinkime su mūsų programos pavyzdžiu, kaip pridėti naują produktą ir įrašyti jo duomenis į saugyklą.

Atidarykime failą root.jsx ir pridėkime į maketą mygtuką naujo produkto pridėjimui prieš nav, apvyniojdami jį formos žyme. Taip pat apvyniokime dabar mygtuką ir mūsų sąrašą į dar vieną div su #menu. Maketas dabar atrodys taip:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">pridėti produktą</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Be pavadinimo</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>nėra produktų...</i>
			</p>
			)}
		</div>

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

Jei dabar nueisime į skirtuką 'Tinklas' kūrėjo skydelyje, o tada paspausime mūsų mygtuką, pamatysime klaidingą užklausą dokumentui į serverį. Naudodami React Router mes vėl pasinaudosime maršruto nustatymu kliento pusėje, neįtraukdami užklausos į serverį.

Pakeiskime tam šią žymą form į komponentą Form React Router. Pridėkime pradžiai importą Form:

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

Dabar pakeiskime žymes form kodo gabaliuke:

<Form method="post">
	<button type="submit">pridėti produktą</button>
</Form>

Perkraukite mūsų programą ir vėl pažiūrėkite į kūrėjo skydelį. Paspauskite produkto pridėjimo mygtuką - dabar užklausos į serverį jau nėra (kol kas nekreipkite dėmesio į klaidą).

Paimkite programą, kurią sukūrėte užduotyse prie ankstesnių pamokų. Naudodamiesi pamokos medžiaga, pataisykite išdėstymą funkcijos Root, pridėkite mygtuką studento pridėjimui į žymą form. Įsitikinkite, kad paspaudus mygtuką įvyksta užklausa į serverį.

O dabar pakeiskite žymą form, į komponentą Form. Įsitikinkite, kad paspaudus mygtuką studento pridėjimui užklausos į serverį neišsiunčiama.