Datatoevoeging in React Router

Op vorige lesse het ons die laaier voorberei en die data vir 'n spesifieke roete uit die bergingsplek gelaai. Kom ons maak nou kennis, met behulp van ons toepassing as voorbeeld, hoe om 'n nuwe produk by te voeg en sy data in die bergingsplek te skryf.

Kom ons maak die lêer root.jsx oop en voeg 'n knoppie om 'n nuwe produk by te voeg by die uitleg, voor nav, deur dit in 'n vorm-etiket te verpak. Ons sal ook nou die knoppie en ons lys in nog 'n div met #menu verpak. Die uitleg sal nou so lyk:

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

As ons nou na die oortjie 'Network' van die ontwikkelaarpaneel gaan, en dan op ons knoppie druk, sal ons 'n foutiewe versoek vir die dokument na die bediener sien. Met React Router sal ons weer van klëntkantroetering gebruik maak, wat die versoek na die bediener uitsluit.

Kom ons verander die form-etiket na die Form-komponent van React Router om dit te doen. Laat ons eers die invoer van Form byvoeg:

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

Vervang nou die form-etikette in die stukkie kode:

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

Herlaai ons toepassing en kyk weer na die ontwikkelaarpaneel. Druk op die produkbyvoegknoppie - nou is daar nie meer 'n versoek na die bediener nie (let asseblief nie op die fout vaar nie).

Neem die toepassing wat jy in die opdragte vir die vorige lesse geskep het. Gebruik die materiaal van die les, korrigeer die uitleg van die Root-funksie, voeg 'n knoppie by om 'n student by te voeg in die form-etiket. Maak seker dat 'n versoek na die bediener plaasvind wanneer die knoppie gedruk word.

En vervang nou die form-etiket met die Form-komponent. Maak seker dat daar nie 'n versoek na die bediener gestuur word wanneer op die studentbyvoegknoppie gedruk word nie.