Presmerovanie na inú trasu v React Router

Teraz sa údaje zadané do formulára pri editácii produktu ukladajú, ale je jedno ALE - po uložení údajov zostávame na stránke s formulárom, a my sa musíme dostať späť na stránku produktu. S tým nám pomôže presmerovanie, s ktorým sa zoznámime v tejto lekcii.

Otvorme súbor edit.jsx a importujme redirect z knižnice:

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

A potom urobme to, že funkcia action bude teraz vracať nie 1, ale presmeruje nás na požadovanú trasu. V tomto prípade je potrebné sa vrátiť späť na stránku s produktom:

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

Teraz, kliknutím na tlačidlo uloženia, sa dostaneme späť na stránku produktu s aktualizovanými údajmi.

To isté môžeme urobiť aj pre pridanie nového produktu, pretože bolo by pravdepodobne pohodlnejšie okamžite prejsť na formulár a vyplniť ho. Urobme to tak.

Na začiatok je teraz potrebné otvoriť súbor root.jsx a importovať redirect, pretože pridanie produktov prebieha na koreňovej stránke:

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

Znova vezmeme funkciu action a teraz budeme vracať nie product, ale urobíme presmerovanie na stránku editácie:

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

Skontrolujme aj to. Kliknime teraz na tlačidlo pridania produktu a uvidíme formulár pre jeho editáciu.

Vezmite aplikáciu vytvorenú vami v úlohách k minulým lekciám. Použitím materiálov lekcie, implementujte v nej presmerovanie na stránku študenta po stlačení tlačidla uloženia údajov na stránke s formulárom.

A teraz implementujte presmerovanie z hlavnej stránky na stránku s formulárom editácie údajov študenta po kliknutí na tlačidlo pridania študenta do zoznamu.