Tietojen lisääminen React Routeriin

Edellisillä tunneilla valmistelimme lataajan ja tietojen purkamisen tietylle reitille tietovarastosta. Tutustukaamme nyt sovelluksemme esimerkin avulla, kuinka uusi tuote lisätään ja sen tiedot kirjoitetaan tietovarastoon.

Avataan tiedosto root.jsx ja lisätään asetteluun painike uuden tuotteen lisäämiseksi ennen nav:ia, käärimällä se lomaketunnisteeseen. Käärimme nyt myös painikkeen ja listamme toiseen div-elementtiin, jossa on #menu. Asettelu näyttää nyt tältä:

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

Jos menemme nyt kehittäjän paneelin välilehdelle 'Verkko' ja painamme sitten painikettamme, näemme virheellisen dokumenttipyynnön palvelimelle. React Routerin avulla hyödynnämme jälleen asiakaspuolen reititystä eston pyyntö palvelimelle.

Muutetaan tätä varten tunniste form React Routerin komponentiksi Form. Lisätään aloitusimportti Form:

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

Korvaa nyt tunnisteet form koodinpätkässä:

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

Lataa sovelluksemme uudelleen ja tarkista kehittäjän paneeli uudelleen. Paina tuotteen lisäyspainiketta - nyt pyyntöä palvelimelle ei ole enää (älä vielä kiinnitä huomiota virheeseen).

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja, korjaa funktion Root ulkoasu, lisää painike opiskelijan lisäämiseksi tunnisteeseen form. Varmista, että painiketta painettaessa tapahtuu pyyntö palvelimelle.

Ja nyt korvaa tunniste form, komponentilla Form. Varmista, että opiskelijan lisäämispainiketta painettaessa pyyntöä palvelimelle ei lähetetä.