Додавање на податоци во React Router

Во претходните лекции подготвивме вчитувач и преземање на податоци по одредена рута од складиштето. Ајде сега да се запознаеме на примерот на нашата апликација како да додадеме нов производ и да ги запишеме неговите податоци во складиштето.

Да ја отвориме датотеката root.jsx и да додадеме во распоредот копче за додавање на нов производ пред nav, завиткувајќи ја во таг на форма. Исто така сега ќе ја завиткаме копчето и нашиот список во уште еден div со #menu. Распоредот сега ќе изгледа вака:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">add product</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>no products here ...</i>
			</p>
			)}
		</div>

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

Ако сега одиме на јазичето 'Мрежа' на панелот за развивачи, а потоа кликнеме на нашата копче, ќе видиме погрешно барање на документот до серверот. Со помош на React Router ние повторно ќе ја искористиме рутирањето на клиентска страна, исклучувајќи го барањето до серверот.

Ајде за ова да го смениме тагот form со компонентата Form на React Router. Да додадеме за почеток импорт на Form:

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

Сега заменете ги таговите form во парчето код:

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

Вчитајте ја повторно нашата апликација и погледнете повторно во панелот за развивачи. Кликнете на копчето за додавање на производ - сега барањето до серверот го нема (за сега не обрнувајте внимание на грешката).

Земете ја апликацијата, креирана од вас во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, поправете го изгледот на функцијата Root, додадете копче за додавање на студент во тагот form. Проверете дали при притискање на копчето се случува барање до серверот.

А сега заменете го тагот form, со компонентата Form. Проверете дали при притискање на копчето за додавање на студент барањето до серверот не се испраќа.