Teeümbersuunamine teisele marsruudile React Routeris

Nüüd salvestatakse vormi sisestatud andmed toode redigeerimisel, kuid on üks AGA - pärast andmete salvestamist jääme vormilehele, kuid me peame minema tagasi toote lehele. Selles aitab meid ümbersuunamine, millega tutvume selles õppetükis.

Avame faili edit.jsx ja impordime redirect teegist:

import { redirect } from 'react-router-dom';

Ja siis teeme nii, et funktsioon action tagastab nüüd mitte 1, vaid suunab meid ümber vajalikule marsruudile. Sel juhul peame me minema tagasi toode lehele:

return redirect(`/products/${params.productId}`);

Nüüd, vajutades salvestusnuppu, me jõuame tagasi toote lehele uuendatud andmetega.

Kõike sama saame teha ka uue toote lisamiseks, sest ilmselt oleks mugavam kohe minna vormile ja seda täita. Teeme nii.

Alustuseks peame nüüd avama faili root.jsx ja importima redirect, kuna toodete lisamine toimub juurlehel:

import { redirect } from 'react-router-dom';

Võtame jälle funktsiooni action ja nüüd tagastame mitte product, vaid teeme ümbersuunamise redigeerimise lehele:

return redirect(`/products/${product.id}/edit`);

Kontrollime ka seda. Klõpsame nüüd nupul toode lisamise ja näeme vormi selle redigeerimiseks

Võtke rakendus, mille lõite ülesannetes eelmiste õppetundide jaoks. Kasutades õppetunni materjale, rakendage selles ümbersuunamine õpilase lehele pärast nupu vajutamist andmete salvestamiseks vormiga lehel.

Ja nüüd rakendage ümbersuunamine peamiselt lehelt õpilase andmete redigeerimise vormi lehele pärast kliki nupul õpilase lisamiseks nimekirja.