React Router-da Melumat Elavesi
Kecen derslerde biz yukleyici hazırladıq ve muəyyən bir marşrut üzre melumatları depodan cıxardıq. Gəlin indi nümunə olaraq proqramımızda yeni məhsul əlavə etməyi və onun melumatlarını depoya yazmağı tanıyaq.
root.jsx faylını açaq ve
nav-dan əvvəl yeni məhsul əlavə etmək
üçün düyməni form teq-ine sarıyarak əlavə edək. Həmçinin
indi düyməni ve siyahımızı başqa
bir div ile #menu içine alaq. İndi layout
belə görünəcək:
return (
<div id="main">
<div id="menu">
<form method="post">
<button type="submit">məhsul əlavə et</button>
</form>
{products.length ? (
<nav>
{products.map((product) => (
<Link key={product.id} to={`products/${product.id}`}>
{product.name ? product.name : <i>Adsız</i>}
</Link>
))}
</nav>
) : (
<p>
<i>burada heç bir məhsul yoxdur ...</i>
</p>
)}
</div>
<div id="product">
<Outlet />
</div>
</div>
);
Əgər biz indi developer panelinin 'Şəbəkə'
vərəqinə getsək, sonra da
düyməmizə bassaq, sərvərə səhv bir sorğu
göndərildiyini görəcəyik. React
Router ilə biz yenə client tərəfində marşrutlaşdırmadan
istifadə edəcəyik, serverə sorğunu aradan qaldıraraq.
Gəlin bunun üçün form teq-ini
React Router-un Form komponenti ilə əvəz edək. Əvvəlcə
Form importunu əlavə edək:
import { Form } from 'react-router-dom';
İndi kod parçasındaki form teq-lərini əvəz edək:
<Form method="post">
<button type="submit">məhsul əlavə et</button>
</Form>
Proqramımızı yenidən yükləyin ve yenidən developer panelinə baxın. Məhsul əlavə etmə düyməsinə basalım - indi artıq serverə sorğu yoxdur (heyə halda xətaya diqqət yetirməyin).
Kecmiş derslərin tapşırıqlarında yaratdığınız
proqramı götürün. Dərs materiallarından istifadə edərək,
Root funksiyasının quruluşunu düzəldin,
form teq-i içində telebe əlavə etmək üçün düymə
əlavə edin. Əmin olun ki, düymə basıldıqda
serverə sorğu gedir.
İndi isə form teq-ini,
Form komponenti ilə əvəz edin. Əmin olun ki,
telebe əlavə etmə düyməsinə basdıqda
serverə heç bir sorğu göndərilmir.