Tilføjelse af data i React Router

I de foregående lektioner har vi forberedt en loader og afsendelse af data for en bestemt rute fra lageret. Lad os nu stifte bekendtskab med et eksempel i vores applikation på, hvordan man tilføjer et nyt produkt og skriver dets data til lageret.

Lad os åbne filen root.jsx og tilføje en knap til at tilføje et nyt produkt i layoutet før nav, og indpakke den i en form-tag. Lad os også nu indpakke både knappen og vores liste i endnu en div med #menu. Layoutet vil nu se sådan ud:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">tilføj produkt</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Unavngivet</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>ingen produkter her ...</i>
			</p>
			)}
		</div>

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

Hvis vi nu går til fanen 'Netværk' i udviklerpanelet og derefter klikker på vores lille knap, vil vi se en fejlbehæftet anmodning om et dokument til serveren. Med React Router vil vi igen bruge client-side routing for at undgå anmodningen til serveren.

Lad os for dette ændre tagget form til React Router-komponenten Form. Lad os starte med at tilføje importen af Form:

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

Erstat nu tagsene form i kodestykket:

<Form method="post">
	<button type="submit">tilføj produkt</button>
</Form>

Genindlæs vores applikation og tjek igen i udviklerpanelet. Lad os klikke på tilføjelsesknappen for produktet - nu er der ikke længere en anmodning til serveren (ignorer fejlen for nu).

Tag applikationen, som du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen, ret layoutet for funktionen Root, tilføj en knap for at tilføje en studerende i tagget form. Sørg for, at der sendes en anmodning til serveren, når knappen trykkes.

Og erstat nu tagget form med komponenten Form. Sørg for, at der ikke sendes en anmodning til serveren, når der klikkes på knappen for at tilføje en studerende.