Nukreipimas į kitą maršrutą React Router

Dabar formoje įvesti duomenys redaguojant produktą yra išsaugomi, bet yra vienas BET - išsaugojus duomenis mes liekame formos puslapyje, o mums reikia grįžti atgal į produkto puslapį. Tai mums padės nukreipimas, su kuriuo susipažinsime šioje pamokoje.

Atidarykime failą edit.jsx ir importuokime redirect iš bibliotekos:

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

Ir tada padarykime taip, kad funkcija action dabar grąžintų ne 1, o nukreiptų mus į reikiamą maršrutą. Šiuo atveju mums reikia grįžti atgal į produkto puslapį:

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

Dabar, paspaudę išsaugojimo mygtuką, mes grįžtame atgal į produkto puslapį su atnaujintais duomenimis.

Visi tą patį galime atlikti ir naujo produkto pridėjimui, nes tikriausiai būtų patogiau iškart patekti į formą ir ją užpildyti. Padarykime taip.

Pirmiausia mums dabar reikia atidaryti failą root.jsx ir importuoti redirect, kadangi produktų pridėjimas vyksta pagrindiniame puslapyje:

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

Vėl paimame funkciją action ir dabar grąžinsime ne product, o atliksime nukreipimą į redagavimo puslapį:

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

Patikrinkime ir tai. Dabar paspauskime mygtuką produkto pridėjimo ir pamatysime formą jo redagavimui.

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, įgyvendinkite jame nukreipimą į studento puslapį po mygtuko paspaudimo duomenų išsaugojimui formos puslapyje.

O dabar įgyvendinkite nukreipimą iš pagrindinio puslapio į studento duomenų redagavimo formos puslapį po mygtuko paspaudimo pridėti studentą į sąrašą.