Добавяне на данни в React Router

В предишните уроци подготвихме зареждащ и изтегляне на данни по определен маршрут от хранилището. Нека сега се запознаем на примера на нашето приложение как се добавя нов продукт и се записват неговите данни в хранилището.

Нека отворим файла root.jsx и добавим в макета бутон за добавяне на нов продукт преди nav, като го обвием в таг форма. Също така обвиваме сега бутона и нашия списък в още един див с #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. Уверете се, че при натискане на бутона за добавяне на студент заявка към сървъра не се изпраща.