Productbewerkingspagina in de browser in Redux
In de vorige les hebben we een formulier gemaakt voor het bewerken van een product. Laten we er een route aan toevoegen.
Open onze productenapplicatie,
en daarin het bestand App.jsx en voeg nog
een object voor een child route toe aan
de array voor de eigenschap children (vergeet
niet EditProductForm te importeren):
{
path: '/editProduct/:productId',
element: <EditProductForm />,
},
Ook hebben we een link nodig om naar het bewerkingsformulier
te navigeren. Open hiervoor
ProductPage.jsx en plaats deze link in
de gerenderde markup na de laatste alinea
met de producthoeveelheid en vóór de afsluitende div:
<Link to={`/editProduct/${product.id}`} className="link-btn">
edit
</Link>
Importeer ook Link uit de routerbibliotheek:
import { Link } from 'react-router-dom'
Start onze applicatie en klik op de knop
om een product te bekijken. Laten we proberen
het te bewerken en dan terug te keren
naar de productlijst door op de link
'Products' in het menu links te klikken. Ook in Redux
DevTools kun je de nieuwe actie
productUpdated zien en de wijzigingen
in het productobject in de store bekijken.
Open je applicatie met studenten.
Voeg in het bestand App.jsx nog een child
route toe voor het bewerken van studentgegevens.
Voeg een Link element toe in de markup
op de studentenpagina om naar
de pagina voor het bewerken van zijn gegevens te navigeren.
Start je applicatie, probeer de gegevens van een student te bewerken. Let op de adresbalk van de browser wanneer je je op de bewerkingspagina bevindt. Bekijk de wijzigingen in de Redux DevTools van de browser.
