Termék szerkesztési oldal a böngészőben Redux-ban

Az előző órán elkészítettük az űrlapot a termék szerkesztéséhez. Most rendeljünk hozzá egy útvonalat.

Nyissuk meg a termék alkalmazásunkat, és benne a App.jsx fájlt, és adjunk hozzá még egy gyermek útvonal objektumot a children tulajdonság számára (ne felejtsd el importálni a EditProductForm-ot):

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

Továbbá a szerkesztési űrlapra való navigáláshoz szükségünk van egy linkre. Ehhez nyissuk meg a ProductPage.jsx fájlt és helyezzük el ezt a linket a visszaadott JSX-ben, a termék mennyiségéről szóló utolsó bekezdés után és a záró div elött:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

Importáld a Link-et is az útválasztó könyvtárából:

import { Link } from 'react-router-dom'

Indítsuk el az alkalmazásunkat és kattintsunk bármelyik termék megtekintés gombjára. Próbáljuk meg szerkeszteni, majd térjünk vissza a terméklistához a bal oldali menüben lévő 'Products' linkre kattintva. A Redux DevTools-ban láthatod az új productUpdated akciót és megtekintheted a változásokat a termék objektumban a store-ban.

Nyisd meg a diák alkalmazásodat. A App.jsx fájlban adj hozzá még egy gyermek útvonalat egy diák adatainak szerkesztéséhez.

Adj hozzá egy Link elemet a diák oldal JSX-éhez, hogy navigálhass a diák adatainak szerkesztési oldalára.

Indítsd el az alkalmazásod, próbáld meg szerkeszteni valamelyik diák adatait. Figyeld meg a böngésző címsorát, amikor a szerkesztési oldalon vagy. Nézd meg a változásokat a böngésző Redux DevTools-jában.