Pārvirzīšana uz citu maršrutu React Router
Tagad dati, kas ievadīti formā, rediģējot produktu, tiek saglabāti, bet ir viens BET - pēc datu saglabāšanas mēs paliekam lapā ar formu, un mums ir jāatgriežas atpakaļ uz produkta lapu. Tas mums palīdzēs pārvirzīšana, ar kuru mēs iepazīsimies šajā nodarbībā.
Atvērsim failu edit.jsx
un importēsim redirect no
bibliotēkas:
import { redirect } from 'react-router-dom';
Un tad izdarīsim tā, ka funkcija
action tagad atgriezīs
ne 1, bet pārvirzīs mūs
uz vajadzīgo maršrutu. Šajā gadījumā
mums ir jāatgriežas atpakaļ uz
produkta lapu:
return redirect(`/products/${params.productId}`);
Tagad, nospiežot saglabāšanas pogu, mēs nonākam atpakaļ uz produkta lapu ar atjauninātiem datiem.
To pašu mēs varam izdarīt arī jauna produkta pievienošanai, jo droši vien būtu ērtāk uzreiz nonākt uz formu un aizpildīt to. Darīsim tā.
Vispirms mums tagad jāatver
fails root.jsx un jāimportē
redirect, jo produktu
pievienošana notiek saknes lapā:
import { redirect } from 'react-router-dom';
Atkal ņemam funkciju action un
tagad atgriezīsim ne product,
bet veiksim pārvirzīšanu uz
rediģēšanas lapu:
return redirect(`/products/${product.id}/edit`);
Pārbaudīsim arī to. Noklikšķināsim tagad uz pogas produkta pievienošanai un redzēsim formu tā rediģēšanai
Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, īstenojiet tajā pārvirzīšanu uz studenta lapu pēc datu saglabāšanas pogas nospiešanas uz lapas ar formu.
Un tagad īstenojiet pārvirzīšanu no galvenās lapas uz lapu ar studenta datu rediģēšanas formu pēc klikšķa uz pogas studenta pievienošanai sarakstā.
