Omdirigering til en annen rute i React Router
Nå blir dataene som er lagt inn i skjemaet når produktet redigeres, lagret, men det er ett MEN - etter lagring av dataene forblir vi på siden med skjemaet, og vi må komme tilbake til produktsiden. Omdirigering vil hjelpe oss med dette, som vi vil bli kjent med i denne leksjonen.
La oss åpne filen edit.jsx
og importere redirect fra
biblioteket:
import { redirect } from 'react-router-dom';
Og deretter gjøre slik at funksjonen
action nå vil returnere
1, men omdirigere oss
til den nødvendige ruten. I dette tilfellet
må vi gå tilbake til
produktsiden:
return redirect(`/products/${params.productId}`);
Nå, når vi klikker på lagringsknappen, kommer vi tilbake til produktsiden med oppdaterte data.
Vi kan gjøre nøyaktig det samme for å legge til et nytt produkt, for det ville sannsynligvis vært mer praktisk å umiddelbart gå til skjemaet og fylle det ut. La oss gjøre det slik.
Til å begynne med må vi nå åpne
filen root.jsx og importere
redirect, siden tillegget
av produkter skjer på rotsiden:
import { redirect } from 'react-router-dom';
Igjen tar vi funksjonen action og
vil nå returnere ikke product,
men gjøre en omdirigering til redigeringssiden:
return redirect(`/products/${product.id}/edit`);
La oss sjekke dette også. La oss nå klikke på knappen for å legge til produkt og vi vil se skjemaet for å redigere det.
Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Ved å bruke materialet fra leksjonen, implementer omdirigering til studentens side etter å ha trykket på lagringsknappen på siden med skjemaet.
Og nå implementerer du omdirigering fra hovedsiden til siden med skjemaet for redigering av studentdata etter klikk på knappen for å legge til student i listen.
