Додавање података у Реацт Роутер

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

Отворимо фајл root.jsx и додајмо у макет дугме за додавање новог производа пре nav, завијајући га у таг форме. Такође ћемо сада завити и дугме и наш списак у још један див са #menu. Макет ће сада изгледати овако:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">додај производ</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Безимено</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>нема производа овде ...</i>
			</p>
			)}
		</div>

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

Ако сада одемо на картицу 'Мрежа' панела за програмере, а затим кликнемо на наше дугме, видећемо погрешан захтев документа на сервер. Помоћу Реацт Роутера ћемо поново искористити усмеравање на страни клијента, искључујући захтев на сервер.

Хајде да за ово променимо таг form у компоненту Form Реацт Роутера. Додајмо за почетак увоз Form:

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

Сада заменимо тагове form у делу кода:

<Form method="post">
	<button type="submit">додај производ</button>
</Form>

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

Узмите апликацију, коју сте направили у задацима за претходне часове. Користећи се материјалом часа, исправите изглед функције Root, додајте дугме за додавање студента у тагу form. Уверите се да се при клику на дугме шаље захтев на сервер.

А сада замените таг form, компонентом Form. Уверите се да се при клику на дугме за додавање студента захтев на сервер не шаље.