Přidávání dat do React Router

V předchozích lekcích jsme připravili loader a vykládání dat pro konkrétní route z úložiště. Pojďme se nyní na příkladu naší aplikace seznámit, jak přidat nový produkt a zapsat jeho data do úložiště.

Otevřeme soubor root.jsx a přidejme do layoutu tlačítko pro přidání nového produktu před nav, a obalme jej v tagu form. Také nyní obalme tlačítko a náš seznam v dalším divu s #menu. Layout nyní bude vypadat takto:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">přidat produkt</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Bez názvu</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>žádné produkty ...</i>
			</p>
			)}
		</div>

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

Pokud nyní přejdeme na záložku 'Síť' panelu vývojáře a poté klikneme na naše tlačítko, uvidíme chybný požadavek dokumentu na server. S pomocí React Router opět využijeme směrování na straně klienta, čímž vyloučíme požadavek na server.

Pojďme proto změnit tag form na komponentu Form React Router. Přidejme pro začátek import Form:

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

Nyní nahraďme tagy form v kousku kódu:

<Form method="post">
	<button type="submit">přidat produkt</button>
</Form>

Obnovte naši aplikaci a podívejte se znovu na panel vývojáře. Klikněme na tlačítko přidání produktu - nyní již požadavek na server není (na chybu zatím neberte zřetel).

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. Použijte materiály lekce, opravte verzi funkce Root, přidejte tlačítko pro přidání studenta v tagu form. Ujistěte se, že při stisknutí tlačítka dochází k požadavku na server.

A nyní nahraďte tag form komponentou Form. Ujistěte se, že při kliknutí na tlačítko přidání studenta se požadavek na server neodesílá.