Doorverwijzing naar een andere route in React Router
De gegevens die in het formulier zijn ingevoerd bij het bewerken van een product worden nu opgeslagen, maar er is één MAAR - na het opslaan van de gegevens blijven we op de pagina met het formulier, terwijl we terug moeten naar de productpagina. Hierbij helpt een doorverwijzing, waarmee we in deze les kennis maken.
Laten we het bestand edit.jsx openen
en redirect importeren uit
de bibliotheek:
import { redirect } from 'react-router-dom';
En laten we er dan voor zorgen dat de functie
action nu niet 1 teruggeeft,
maar ons doorverwijst naar
de benodigde route. In dit geval
moeten we terugkeren naar
de productpagina:
return redirect(`/products/${params.productId}`);
Nu komen we, door op de opslaan-knop te klikken, terug op de productpagina met de bijgewerkte gegevens.
Hetzelfde kunnen we ook doen voor het toevoegen van een nieuw product, want het was waarschijnlijk handiger om meteen naar het formulier te gaan en het in te vullen. Laten we dat doen.
Om te beginnen moeten we nu het
bestand root.jsx openen en
redirect importeren,
aangezien het toevoegen
van producten op de hoofdpagina plaatsvindt:
import { redirect } from 'react-router-dom';
We nemen opnieuw de functie action en
zullen nu niet product teruggeven,
maar een doorverwijzing maken naar de
bewerkpagina:
return redirect(`/products/${product.id}/edit`);
Laten we ook dit controleren. Laten we nu op de knop voor het toevoegen van een product klikken en we zien het formulier voor het bewerken ervan.
Neem de applicatie die u heeft gemaakt in de opdrachten bij eerdere lessen. Gebruikmakend van de lesmaterialen, implementeer hierin een doorverwijzing naar de studentenpagina na het klikken op de opslaan-knop op de pagina met het formulier.
En implementeer nu een doorverwijzing vanaf de hoofd- pagina naar de pagina met het formulier voor het bewerken van studentgegevens na een klik op de knop voor het toevoegen van een student aan de lijst.
