Dodawanie danych w React Router

W poprzednich lekcjach przygotowaliśmy loader i wyładowanie danych dla określonej trasy z magazynu. Zapoznajmy się teraz na przykładzie naszej aplikacji jak dodawać nowy produkt i zapisywać jego dane w magazynie.

Otwórzmy plik root.jsx i dodajmy w layoucie przycisk do dodawania nowego produktu przed nav, owijając go w tag formularza. Również owińmy teraz przycisk i naszą listę w jeszcze jeden div z #menu. Layout będzie teraz wyglądać tak:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">dodaj produkt</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Bez nazwy</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>brak produktów ...</i>
			</p>
			)}
		</div>

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

Jeśli teraz wejdziemy na zakładkę 'Sieć' panelu deweloperskiego, a następnie naciśniemy nasz przycisk, to zobaczymy błędne żądanie dokumentu na serwer. Za pomocą React Router znów skorzystamy z routingu po stronie klienta, wykluczając żądanie na serwer.

Zróbmy to zmieniając tag form na komponent Form React Router. Dodajmy na początek import Form:

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

Teraz zamieńmy tagi form w kawałku kodu:

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

Przeładuj naszą aplikację i spójrz ponownie na panel deweloperski. Naciśnij przycisk dodawania produktu - teraz żądania na serwer już nie ma (na błąd na razie nie zwracaj uwagi).

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, popraw wersję funkcji Root, dodaj przycisk do dodawania studenta w tagu form. Upewnij się, że po naciśnięciu przycisku występuje żądanie na serwer.

A teraz zamień tag form, na komponent Form. Upewnij się, że po naciśnięciu na przycisk dodawania studenta żądanie na serwer nie jest wysyłane.