Legge til data i React Router

I de forrige leksjonene forberedte vi en loader og henting av data for en bestemt rute fra lagringsplassen. La oss nå bli kjent med, ved å bruke eksempelet fra vår applikasjon, hvordan man legger til et nytt produkt og skriver dens data til lagringsplassen.

La oss åpne filen root.jsx og legge til en knapp for å legge til et nytt produkt i layouten, foran nav, og omslutte den med en form-tag. La oss også omslutte både knappen og listen vår i en annen div med #menu. Layouten vil nå se slik ut:

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

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

Hvis vi nå går til fanen 'Nettverk' i utviklerverktøyet, og deretter trykker på knappen vår, vil vi se en feil forespørsel om et dokument til serveren. Ved hjelp av React Router vil vi igjen bruke klient-side routing for å unngå forespørselen til serveren.

La oss for dette endre taggen form til React Router-komponenten Form. La oss legge til en importering av Form til å begynne med:

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

La oss nå erstatte taggene form i kodesnutten:

<Form method="post">
	<button type="submit">legg til produkt</button>
</Form>

Last inn applikasjonen vår på nytt og sjekk igjen i utviklerverktøyet. Trykk på knappen for å legge til produkt - nå er det ingen forespørsel til serveren (ignorer feilmeldingen foreløpig).

Ta applikasjonen du opprettet i oppgavene til de forrige leksjonene. Bruk materialet fra leksjonen til å korrigere layouten i funksjonen Root, og legg til en knapp for å legge til en student i taggen form. Forsikre deg om at når du trykker på knappen, sendes en forespørsel til serveren.

Og nå erstatter du taggen form med komponenten Form. Forsikre deg om at når du trykker på knappen for å legge til student, blir ingen forespørsel sendt til serveren.