Faqja e Redaktimit të Produktit në Shfletues në Redux
Në seancën e kaluar, ne krijuam një formular për redaktimin e produktit. Le të shtojmë një rrugë për të.
Le të hapim aplikacionin tonë të produkteve,
dhe në të skedarin App.jsx dhe të shtojmë edhe një
objekt rruge fëmijë në
vargun për vetinë children (mos
harroni të importoni EditProductForm):
{
path: '/editProduct/:productId',
element: <EditProductForm />,
},
Gjithashtu për të kaluar në formularin e redaktimit
na duhet të bëjmë një lidhje. Për këtë, le të hapim
ProductPage.jsx dhe ta vendosim këtë lidhje në
HTML-në e kthyer
pas paragrafit të fundit
me sasinë e produktit dhe përpara div-it mbyllës:
<Link to={`/editProduct/${product.id}`} className="link-btn">
redakto
</Link>
Gjithashtu importoni Link nga libraria e ruterit:
import { Link } from 'react-router-dom'
Le të nisim aplikacionin tonë dhe të klikojmë te butoni
i shikimit të ndonjë produkti. Le të provojmë
ta redaktojmë atë dhe të kthehemi prapa
në listën e produkteve, duke klikuar në lidhjen
'Products' në menunë majtas. Gjithashtu në Redux
DevTools ju mund të shihni një aksion të ri
productUpdated dhe të shikoni ndryshimet
e objektit të produktit në store.
Hapni aplikacionin tuaj me studentët.
Në skedarin App.jsx shtoni një rrugë fëmijë tjetër
për redaktimin e të dhënave të studentit.
Shtoni një element Link në HTML-në e
faqes së studentit për të kaluar në
faqen e redaktimit të të dhënave të tij.
Nisni aplikacionin tuaj, provoni të redaktoni të dhënat e ndonjë studenti. Kushtojini vëmendje rreshtit të adresave të shfletuesit, kur jeni në faqen e redaktimit. Shikoni ndryshimet në Redux DevTools të shfletuesit.