Att lägga till data i React Router

I tidigare lektioner har vi förberett en laddare och avlastning av data för en specifik rutt från lagret. Låt oss nu bekanta oss med ett exempel från vår applikation hur man lägger till en ny produkt och skriver dess data till lagret.

Låt oss öppna filen root.jsx och lägga till en knapp för att lägga till en ny produkt i layouten, före nav, och omsluta den med en form-tagg. Vi kommer också att omsluta både knappen och vår lista i ytterligare en div med #menu. Layouten kommer nu att se ut så här:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">lägg till produkt</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>inga produkter här ...</i>
			</p>
			)}
		</div>

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

Om vi nu går till fliken 'Nätverk' i utvecklarpanelen och sedan klickar på vår knapp, kommer vi att se en felaktig förfrågan om ett dokument till servern. Med React Router kommer vi återigen att använda routning på klientsidan, vilket undviker en förfrågan till servern.

Låt oss för att åstadkomma detta ändra taggen form till React Routers komponent Form. Låt oss lägga till en import av Form till att börja med:

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

Ersätt nu taggarna form i kodavsnittet:

<Form method="post">
	<button type="submit">lägg till produkt</button>
</Form>

Ladda om vår applikation och titta igen i utvecklarpanelen. Låt oss klicka på knappen för att lägga till produkt - nu finns det ingen förfrågan till servern (bry dig inte om felet för tillfället).

Ta applikationen du skapade i uppgifterna till de tidigare lektionerna. Använd materialet från lektionen, rätta till layouten för funktionen Root, lägg till en knapp för att lägga till en student i taggen form. Se till att när knappen trycks så skickas en förfrågan till servern.

Och ersätt nu taggen form med komponenten Form. Se till att när du klickar på knappen för att lägga till student så skickas ingen förfrågan till servern.