Gegevens toevoegen in React Router

In de vorige lessen hebben we de loader voorbereid en het uitladen van gegevens voor een bepaalde route uit de opslag. Laten we nu aan de hand van onze applicatie kennismaken met hoe we een nieuw product kunnen toevoegen en de gegevens ervan in de opslag kunnen schrijven.

Laten we het bestand root.jsx openen en een knop toevoegen om een nieuw product toe te voegen vóór nav, en deze verpakken in een formtag. Ook verpakken we nu de knop en onze lijst in nog een div met #menu. De lay-out ziet er nu als volgt uit:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">product toevoegen</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>geen producten hier ...</i>
			</p>
			)}
		</div>

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

Als we nu naar het tabblad 'Netwerk' van het ontwikkelpaneel gaan en vervolgens op onze knop klikken, zien we een foutieve verzoek voor een document naar de server. Met React Router maken we weer gebruik van routering aan clientzijde, waardoor een verzoek naar de server wordt uitgesloten.

Laten we hiervoor de form tag vervangen door de Form component van React Router. Laten we eerst de import van Form toevoegen:

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

Vervang nu de form tags in het codefragment:

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

Herlaad onze applicatie en kijk opnieuw in het ontwikkelpaneel. Laten we op de knop voor toevoegen van product klikken - nu is er geen verzoek meer naar de server (let voor nu nog niet op de fout).

Neem de applicatie die je hebt gemaakt in de opdrachten bij de vorige lessen. Gebruikmakend van de lesmaterialen, corrigeer de opmaak van de functie Root, voeg een knop toe voor het toevoegen van een student in de form tag. Zorg ervoor dat bij het indrukken van de knop een verzoek naar de server plaatsvindt.

En vervang nu de form tag door de Form component. Zorg ervoor dat bij het klikken op de knop voor toevoegen van student er geen verzoek naar de server wordt verzonden.