Átirányítás egy másik útvonalra a React Routerban
Mostanra a szerkesztés során a termék űrlapjába bevitt adatok mentődnek, de van egy DE - az adatok mentése után az űrlap oldalán maradunk, amikor is vissza kellene kerülnünk a termék oldalára. Ebben segítségünkre lesz az átirányítás, amelyet ebben a leckében ismerünk meg.
Nyissuk meg a edit.jsx fájlt
és importáljuk a redirect-et a
könyvtárból:
import { redirect } from 'react-router-dom';
Majd tegyük úgy, hogy a
action függvény mostantól
ne 1-et adjon vissza, hanem irányítson át minket
a kívánt útvonalra. Ebben az esetben
vissza kell mennünk a
termék oldalára:
return redirect(`/products/${params.productId}`);
Most a mentés gombra kattintva visszakerülünk a termék oldalára a frissített adatokkal.
Ugyanezt megtehetjük az új termék hozzáadásakor is, hiszen valószínűleg kényelmesebb lenne azonnal kilépni az űrlapra és kitölteni azt. Csináljuk így.
Először is most meg kell nyitnunk a
root.jsx fájlt és importálni kell
a redirect-et, mivel a termékek hozzáadása
a gyökér oldalon történik:
import { redirect } from 'react-router-dom';
Ismét vesszük a action függvényt és
mostantól ne product-et adjuk vissza,
hanem hajtsunk végre átirányítást a szerkesztés oldalára:
return redirect(`/products/${product.id}/edit`);
Ezt is ellenőrizzük. Kattintsunk most a termék hozzáadása gombra és látni fogjuk a szerkesztéséhez szükséges űrlapot.
Vegyétek azt az alkalmazást, amit az előző leckék feladataihoz készítettetek. A lecke anyagát felhasználva valósítsátok meg benne az átirányítást a diák oldalára az adatok mentése gomb megnyomása után az űrlap oldalán.
Most valósítsátok meg az átirányítást a fő oldalról a diák adatainak szerkesztésére szolgáló űrlap oldalára, miután rákattintottatok a diák lista hozzáadása gombra.
