React Router-ке деректерді қосу

Алдыңғы сабақтарда біз жүктеуішті дайындадық және қоймадан нақты бағыт бойынша деректерді түсіруді орнаттық. Енді біздің қолданбамыздың мысалында жаңа өнімді қалай қосуға және оның деректерін қоймаға қалай жазуға болатынын білейік.

root.jsx файлын ашып, nav-тің алдында жаңа өнімді қосу үшін түймені форма тегіне орап, макетке қосамыз. Сондай-ақ, енді түймені және біздің тізімді #menu бар тағы бір div-ке ораймыз. Макет енді келесідей болады:

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>
);

Егер біз енді әзірлеуші панелінің 'Желі' қойындысына барып, содан кейін біздің түймешені бассақ, серверге қате сұрау жіберілгенін көреміз. React Router көмегімен біз серверге сұраудан тыс, клиент жағындағы бағыттауды қолданамыз.

Ол үшін form тегін React Router-дің Form компонентіне ауыстырайық. Алдымен Form импортын қосамыз:

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

Енді код үзіндісіндегі form тегтерін ауыстырайық:

<Form method="post">
	<button type="submit">өнімді қосу</button>
</Form>

Қолданбамызды қайта жүктеп, әзірлеуші панелін қайтадан тексеріңіз. Өнімді қосу түймесін басыңыз - енді серверге сұрау жоқ (қатеге әлі назар аудармаңыз).

Алдыңғы сабақтардың тапсырмаларында сіз жасаған қолданбаны алыңыз. Сабақ материалын пайдаланып, Root функциясының версткасын түзетіңіз, form тегіне студентті қосу үшін түймені қосыңыз. Түймені басқанда серверге сұрау жіберілетініне көз жеткізіңіз.

Енді form тегін Form компонентіне ауыстырыңыз. Студентті қосу түймесін басқанда серверге сұрау жіберілмейтініне көз жеткізіңіз.