Andmete lisamine React Routeris

Eelmistel tundidel valmistasime ette laadija ja andmete mahalaadimise kindlalt marsruudilt hoidlast. Tutvume nüüd meie rakenduse näitel, kuidas lisada uut toodet ja kirjutada selle andmed hoidlasse.

Avame faili root.jsx ja lisame maketti uue toote lisamise nupu enne nav, mähkides selle vormi sildisse. Samuti mähime nüüd nupu ja meie loendi veel ühte div-i #menu-ga. Makett näeb nüüd välja selline:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">lisa toode</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Nimetu</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>siin pole tooteid ...</i>
			</p>
			)}
		</div>

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

Kui me nüüd läheme vahekaardile 'Võrgu' arenduspaanil ja vajutame siis meie nupule, näeme veateadet dokumendi päringus serverile. Kasutades React Routerit, kasutame jälle kliendipoolset marsruutimist, välistades päringu serverile.

Teeme selleks muudatuse sildil form komponendile Form React Routerist. Lisame alustuseks impordi Form:

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

Nüüd asendame sildid form koodijupis:

<Form method="post">
	<button type="submit">lisa toode</button>
</Form>

Laadige meie rakendus uuesti ja vaadake jälle arenduspaanile. Vajutame toote lisamise nuppu - nüüd pole serverit päringut enam (ärge pöörake tähelepanu veale praegu).

Võtke rakendus, mille lõite ülesannetes eelmistele tundidele. Kasutades tunni materjale, parandage funktsiooni Root veebilehe kujundus, lisage nupp üliõpilase lisamiseks sildis form. Veenduge, et nupu vajutamisel tehakse serverile päring.

Ja nüüd asendage silt form, komponendiga Form. Veenduge, et üliõpilase lisamise nupu vajutamisel serverile päringut ei saadeta.