Rediger produkt side i browseren i Redux

I den sidste lektion lavede vi en formular til redigering af et produkt. Lad os tilkoble en rute til den.

Åbn vores produktapplikation, og i den filen App.jsx og tilføj endnu et child route objekt i arrayet for egenskaben children (husk at importere EditProductForm):

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

For at navigere til redigeringsformularen skal vi også lave et link. Åbn for dette ProductPage.jsx og placer dette link i den returnerede markup efter det sidste afsnit med produktantallet og før den afsluttende div:

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

Importer også Link fra router biblioteket:

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

Lad os starte vores applikation og klikke på knappen for at se et produkt. Lad os prøve at redigere det og vende tilbage til produktlisten ved at klikke på linket 'Products' i menuen til venstre. Du kan også i Redux DevTools se en ny action productUpdated og se ændringerne i produktobjektet i store.

Åbn din applikation med studerende. I filen App.jsx tilføj endnu et child route for redigering af en studerendes data.

Tilføj et Link element i markup på studerendes side for at navigere til siden for redigering af deres data.

Start din applikation, prøv at redigere data for en vilkårlig studerende. Læg mærke til adressebaren i browseren, når du er på redigeringssiden. Se ændringerne i Redux DevTools i browseren.