React Router'го маалымат кошуу

Өткөн сабактарда биз жүктөгүччү даярдап, белгилүү маршрут боюнча маалыматтарды сактоочу жайдан алып чыктык. Келгиле эми биздин колдонмонунун мисалында жаңы продукт кошуп, анын маалыматтарын сактоочу жайга кантип жазуу керектиги менен таанышалык.

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

Эгерде биз азыр иштеп чыгуучу панелдин 'Тармак' бөлүмүнө өтүп, андан кийин биздин баскычты бассақ, серверге карата жалпы каталуу суроонун бар экендигин көрөбүз. 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 компоненти менен алмаштырыңыз. Студент кошуу баскычын басканда серверге суроо жөнөтүлбөөрүн текшериңиз.