Uudelleenohjaus toiseen reittiin React Routerissa

Nyt lomakkeelle syötetyt tiedot tuotetta muokatessa tallennetaan, mutta on yksi MUTTA - tallennettuamme tiedot pysymme lomakkeen sivulla, vaikka meidän pitäisi päästä takaisin tuotteen sivulle. Tässä auttaa uudelleenohjaus, johon tutustumme tällä oppitunnilla.

Avataan tiedosto edit.jsx ja tuodaan redirect kirjastosta:

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

Ja sitten teemme niin, että toiminto action palauttaa nyt ei 1, vaan ohjaa meidät tarvittavalle reitille. Tässä tapauksessa meidän on palattava takaisin tuotteen sivulle:

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

Nyt, tallennuspainiketta painamalla, me palaamme takaisin tuotteen sivulle päivitetyillä tiedoilla.

Samamme voimme tehdä myös uuden tuotteen lisäämiselle, sillä olisi varmaan kätevämpää päästä heti lomakkeelle ja täyttää se. Tehdäänpä niin.

Aluksi meidän on nyt avattava tiedosto root.jsx ja tuotava redirect, koska tuotteiden lisääminen tapahtuu pääsivulla:

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

Otamme jälleen toiminnon action ja palautamme nyt ei product:n, vaikka teemme uudelleenohjauksen muokkaussivulle:

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

Tarkistetaan myös tämä. Klikkaamme nyt tuotteen lisäämisen painiketta ja näemme lomakkeen sitä varten

Ota sovellus, jonka loit tehtävissä edellisille oppitunneille. Hyödyntäen oppitunnin materiaaleja, toteuta siihen uudelleenohjaus opiskelijan sivulle tietojen tallennuspainiketta painettua lomakkeen sivulla.

Ja nyt toteuta uudelleenohjaus pääsivulta opiskelijan tietojen muokkauslomakkeen sivulle opiskelijan lisäämisen listaan painiketta klikatessa.