Տվյալների ավելացում 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 կոմպոնենտով: Համոզվեք, որ ուսանող ավելացնելու կոճակը սեղմելիս հարցում սերվերին չի ուղարկվում: