Ridrektimi në një rrugë tjetër në React Router
Tani të dhënat e vendosura në formular kur modifikohet produkti ruhen, por ka një POR - pas ruajtjes së të dhënave ne mbetemi në faqen me formularin, kurse ne duhet të kthehemi përsëri në faqen e produktit. Në këtë do na ndihmojë ridrektimi, me të cilin do të njihemi në këtë mësim.
Le të hapim skedarin edit.jsx
dhe të importojmë redirect nga
biblioteka:
import { redirect } from 'react-router-dom';
Dhe pastaj le të bëjmë që funksioni
action të kthejë tani
jo 1, por të na ridrejtojë
në rrugën e nevojshme. Në këtë rast
ne duhet të kthehemi përsëri në
faqen e produktit:
return redirect(`/products/${params.productId}`);
Tani, duke klikuar butonin e ruajtjes, ne kthehemi përsëri në faqen e produktit me të dhënat e përditësuara.
Të njëjtën gjë mund ta bëjmë edhe për shtimin e produktit të ri, sepse ndoshta do të ishte më praktik të dilnim menjëherë në formular dhe ta plotësonim atë. Le ta bëjmë kështu.
Për fillim na duhet tani të hapim
skedarin root.jsx dhe të importojmë
redirect, meqenëse shtimi
i produkteve ndodh në faqen rrënjë:
import { redirect } from 'react-router-dom';
Përsëri marrim funksionin action dhe
tani do të kthejmë jo product,
por do të bëjmë ridrektim në faqen
e modifikimit:
return redirect(`/products/${product.id}/edit`);
Le ta kontrollojmë edhe këtë. Le të klikojmë tani në butonin e shtimit të produktit dhe do të shohim formularin për modifikimin e tij
Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, implementoni në të ridrektimin në faqen e studentit pas klikimit të butonit të ruajtjes së të dhënave në faqen me formular.
Dhe tani implementoni ridrektimin nga faqja kryesore në faqen me formularin e modifikimit të të dhënave të studentit pas klikut mbi butonin e shtimit të studentit në listë.
