მონაცემების დამატება 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 კომპონენტით Form React Router-იდან. დავამატოთ დასაწყისისთვის იმპორტი Form:

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

ახლა შევცვალოთ თეგები form კოდის ნაწილში:

<Form method="post">
	<button type="submit">პროდუქტის დამატება</button>
</Form>

გადატვირთეთ ჩვენი აპლიკაცია და კიდევ ერთხელ გადახედეთ დეველოპერის პანელს. დავაჭერთ პროდუქტის დამატების ღილაკს - ახლა მოთხოვნა სერვერზე აღარ არის (შეცდომაზე ჯერ ყურადღება არ მიაქციოთ).

აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით დავალებებში წინა გაკვეთილებისთვის. გამოიყენეთ გაკვეთილის მასალები, გამასწორეთ ვერსტკა ფუნქციის Root, დაუმატეთ ღილაკი სტუდენტის დასამატებლად თეგში form. დარწმუნდით, რომ ღილაკის დაჭერისას წარმოიქმნება მოთხოვნა სერვერზე.

ახლა კი შეცვალეთ თეგი form, კომპონენტით Form. დარწმუნდით, რომ სტუდენტის დამატების ღილაკზე დაჭერისას მოთხოვნა სერვერზე არ იგზავნება.