Redigeringssida för produkt i webbläsaren i Redux

I förra lektionen skapade vi ett formulär för att redigera produkt. Låt oss lägga till en rutt för det.

Öppna vår produktapplikation, och i den filen App.jsx och lägg till ytterligare ett underordnat ruttobjekt i arrayen för egenskapen children (glöm inte att importera EditProductForm):

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

För att navigera till redigeringsformuläret behöver vi skapa en länk. Öppna för detta ProductPage.jsx och placera denna länk i den returnerade HTML-strukturen efter det sista stycket med produktantalet och före den avslutande div-taggen:

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

Importera också Link från routerbiblioteket:

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

Låt oss starta vår applikation och klicka på knappen för att visa någon produkt. Låt oss försöka redigera den och återgå tillbaka till produktlistan genom att klicka på länken 'Products' i menyn till vänster. Du kan också i Redux DevTools se en ny action productUpdated och titta på förändringarna i produktobjektet i storet.

Öppna din applikation med studenter. I filen App.jsx lägg till ytterligare en underordnad rutt för att redigera studentdata.

Lägg till ett element Link i HTML-strukturen på studentsidan för att navigera till sidan för att redigera deras data.

Starta din applikation, försök redigera data för någon student. Var uppmärksam på adressfältet i webbläsaren när du är på redigeringssidan. Titta på förändringarna i webbläsarens Redux DevTools.