Herlei na 'n ander roete in React Router
Die data wat in die vorm ingevoer is tydens produkbewerking word nou gestoor, maar daar is een MAAR - na die stoor van data bly ons op die bladsy met die vorm, en ons moet terugkeer na die produkbladsy. Hier sal herleiding ons help, waarmee ons in hierdie les kennis maak.
Kom ons maak die lêer edit.jsx oop
en voer redirect in uit
die biblioteek:
import { redirect } from 'react-router-dom';
En dan maak ons so dat die funksie
action nou sal terugkeer
nie 1 nie, maar ons herlei
na die nodige roete. In hierdie geval
moet ons terugkeer na
die produkbladsy:
return redirect(`/products/${params.productId}`);
Nou, wanneer ons die stoor-knoppie druk, kom ons terug op die produkbladsy met die opgedateerde data.
Ons kan dieselfde doen vir die byvoeging van 'n nuwe produk, want dit sou sekerlik gerieflik wees om dadelik na die vorm uit te gaan en dit in te vul. Kom ons doen dit so.
Eerstens moet ons nou die
lêer root.jsx oopmaak en
redirect invoer,
aangesien die byvoeging van
produkte op die wortelblad plaasvind:
import { redirect } from 'react-router-dom';
Neem weer die funksie action en
sal nou nie product terugkeer nie,
maar 'n herleiding na die
bewerkingsbladsy doen:
return redirect(`/products/${product.id}/edit`);
Kom ons toets dit ook. Klik nou op die knoppie om 'n produk by te voeg en ons sal die vorm sien vir die bewerking daarvan
Neem die toepassing wat jy in die opdragte vir vorige lesse geskep het. Gebruik die materiaal van die les, implementeer daarin 'n herleiding na die studentbladsy na die druk van die stoor-knoppie op die bladsy met die vorm.
En implementeer nou 'n herleiding vanaf die hoofblad na die bladsy met die vorm vir studentdatabewerking na 'n klik op die knoppie om 'n student by te voeg in die lys.
