Omdirigering til en anden rute i React Router
Nu gemmes data indtastet i formularen under redigering af produktet, men der er en MEN - efter lagring af data forbliver vi på siden med formularen, og vi skal tilbage til produktsiden. Omdirigering kan hjælpe os med dette, som vi vil stifte bekendtskab med i denne lektion.
Lad os åbne filen edit.jsx
og importere redirect fra
biblioteket:
import { redirect } from 'react-router-dom';
Og derefter sørge for, at funktionen
action nu returnerer
ikke 1, men omdirigerer os
til den ønskede rute. I dette tilfælde
er vi nødt til at vende tilbage
til produktsiden:
return redirect(`/products/${params.productId}`);
Nu, når vi klikker på gem-knappen, kommer vi tilbage til produktsiden med opdaterede data.
Vi kan gøre det samme for tilføjelse af et nyt produkt, for det ville sandsynligvis være mere praktisk straks at komme ud på formularen og udfylde den. Lad os gøre det på den måde.
Til at starte med er vi nu nødt til at åbne
filen root.jsx og importere
redirect, da tilføjelse
af produkter foregår på rodsiden:
import { redirect } from 'react-router-dom';
Igen tager vi funktionen action og
vil nu returnere ikke product,
men lave en omdirigering til redigeringssiden:
return redirect(`/products/${product.id}/edit`);
Lad os også tjekke dette. Klik nu på knappen for tilføjelse af produkt, og vi vil se formularen for dens redigering
Tag applikationen, som du oprettede i opgaverne til tidligere lektioner. Brug materialet fra lektionen, implementer i den omdirigering til elevsiden efter at have klikket på gem-knappen på siden med formularen.
Og nu implementer omdirigering fra hovedsiden til siden med formularen for redigering af elevdata efter klik på knappen for tilføjelse af elev i listen.
