Redirecționarea către altă rută în React Router
Acum datele introduse în formular la editarea produsului sunt salvate, dar există un ÎNSĂ - după salvarea datelor rămânem pe pagina cu formularul, iar noi trebuie să revenim înapoi pe pagina produsului. În aceasta ne va ajuta redirecționarea, cu care ne vom familiariza în această lecție.
Să deschidem fișierul edit.jsx
și să importăm redirect din
bibliotecă:
import { redirect } from 'react-router-dom';
Și apoi să facem astfel încât funcția
action să returneze acum
nu 1, ci să ne redirecționeze
către ruta necesară. În acest caz
este necesar să revenim înapoi pe
pagina produsului:
return redirect(`/products/${params.productId}`);
Acum, făcând clic pe butonul de salvare, noi ajungem înapoi pe pagina produsului cu datele actualizate.
Același lucru îl putem face și pentru adăugarea unui nou produs, deoarece probabil ar fi mai convenabil să ieșim imediat pe formular și să îl completăm. Să facem așa.
Pentru început acum trebuie să deschidem
fișierul root.jsx și să importăm
redirect, deoarece adăugarea
produselor are loc pe pagina rădăcină:
import { redirect } from 'react-router-dom';
Luăm din nou funcția action și
acum vom returna nu product,
ci vom face redirecționare către pagina
de editare:
return redirect(`/products/${product.id}/edit`);
Să verificăm și asta. Să facem clic acum pe butonul de adăugare a produsului și vom vedea formularul pentru editarea lui
Luați aplicația creată de dumneavoastră în sarcinile din lecțiile trecute. Folosind materialele lecției, implementați în ea redirecționarea către pagina studentului după apăsarea butonului de salvare a datelor pe pagina cu formularul.
Și acum implementați redirecționarea de pe pagina principală către pagina cu formularul de editare a datelor studentului după clic pe butonul de adăugare a studentului în listă.
