React Router-ում այլ երթուղու վերահղում
Այժմ ապրանքը խմբագրելիս ձևի մեջ մուտքագրված տվյալները պահպանվում են, բայց կա մի ԲԱՅՑ - տվյալները պահպանելուց հետո մենք մնում ենք ձևի էջում, իսկ մենք պետք է վերադառնանք ապրանքի էջ։ Այս հարցում մեզ կօգնի վերահղումը, որի հետ մենք կծանոթանանք այս դասում։
Եկեք բացենք edit.jsx ֆայլը
և իմպորտենք redirect
գրադարանից։
import { redirect } from 'react-router-dom';
Այնուհետև եկեք անենք, որ
action ֆունկցիան
այժմ վերադարձնի ոչ թե 1, այլ վերահղի մեզ
դեպի պահանջվող երթուղի։ Այս դեպքում
մեզ անհրաժեշտ է վերադառնալ դեպի
ապրանքի էջ։
return redirect(`/products/${params.productId}`);
Այժմ, պահպանելու կոճակը սեղմելով, մենք վերադառնում ենք ապրանքի էջ թարմացված տվյալներով։
Նույնը մենք կարող ենք անել նաև նոր ապրանք ավելացնելու դեպքում, քանի որ հավանաբար ավելի հարմար կլիներ անմիջապես անցնել ձևին և լրացնել այն։ Եկեք այդպես անենք։
Սկզբից մեզ հիմա անհրաժեշտ է բացել
root.jsx ֆայլը և իմպորտել
redirect, քանի որ ապրանքների ավելացումը
տեղի է ունենում արմատային էջում։
import { redirect } from 'react-router-dom';
Կրկին վերցնում ենք action ֆունկցիան և
այժմ կվերադարձնենք ոչ թե product,
այլ կկատարենք վերահղում դեպի
խմբագրման էջ։
return redirect(`/products/${product.id}/edit`);
Ստուգենք նաև սա։ Եկեք հիմա կտտացնենք ապրանք ավելացնելու կոճակին և կտեսնենք դրա խմբագրման ձևը։
Վերցրեք ձեր կողմից նախորդ դասերին առաջադրանքներում ստեղծված հավելվածը։ Օգտագործելով դասի նյութերը, իրականացրեք դրանում վերահղում դեպի ուսանողի էջ ձևի տվյալները պահպանելու կոճակը սեղմելուց հետո։
Այժմ իրականացրեք վերահղում գլխավոր էջից դեպի ուսանողի տվյալները խմբագրելու ձևի էջ ցանկում ուսանող ավելացնելու կոճակի վրա կտտացնելուց հետո։
