Дадаванне даных у 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. Пераканайцеся, што пры націсканні на кнопку дадання студэнта запыту на сервер не адпраўляецца.