Redirekt na drugu rutu u React Router
Podaci uneti u formu prilikom uređivanja proizvoda sada se čuvaju, ali postoji jedno ALI - nakon čuvanja podaka ostajemo na stranici sa formom, a mi treba da se vratimo nazad na stranicu proizvoda. U tome će nam pomoći redirekt, sa kojim ćemo se upoznati u ovoj lekciji.
Hajde da otvorimo fajl edit.jsx
i da importujemo redirect iz
biblioteke:
import { redirect } from 'react-router-dom';
A zatim ćemo učiniti da funkcija
action sada vraća
ne 1, već da nas preusmerava
na željenu rutu. U ovom slučaju
neophodno je da se vratimo nazad na
stranicu sa proizvodom:
return redirect(`/products/${params.productId}`);
Sada, klikom na dugme za čuvanje, mi se vraćamo nazad na stranicu proizvoda sa ažuriranim podacima.
Sve isto možemo da uradimo i za dodavanje novog proizvoda, jer verovatno bi bilo zgodnije da odmah izađemo na formu i da je popunimo. Hajde da to i uradimo.
Za početak sada treba da otvorimo
fajl root.jsx i da importujemo
redirect, pošto se dodavanje
proizvoda dešava na korenoj stranici:
import { redirect } from 'react-router-dom';
Ponovo uzimamo funkciju action i
sada ćemo vraćati ne product,
već ćemo izvršiti redirekt na stranicu
za uređivanje:
return redirect(`/products/${product.id}/edit`);
Proverimo i ovo. Sada ćemo kliknuti na dugme dodavanja proizvoda i videćemo formu za njegovo uređivanje.
Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale iz lekcije, implementirajte u njoj redirekt na stranicu studenta nakon klika na dugme za čuvanje podataka na stranici sa formom.
A sada implementirajte redirekt sa glavne stranice na stranicu sa formom za uređivanje podataka studenta nakon klika na dugme za dodavanje studenta u listu.
