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):

App.jsx{
  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:

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

Importera också Link från routerbiblioteket:

products/ProductPage.jsximport { 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.

Задание 1

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

Задание 2

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

Задание 3

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.