Stránka pro editaci produktu v prohlížeči v Redux

V minulé lekci jsme vytvořili formulář pro editaci produktu. Pojďme k němu přidat trasu.

Otevřeme naši aplikaci s produkty, a v ní soubor App.jsx a přidáme další objekt podřízené trasy do pole pro vlastnost children (nezapomeňte importovat EditProductForm):

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

Také pro přechod na formulář editace potřebujeme vytvořit odkaz. Otevřeme k tomu ProductPage.jsx a umístíme tento odkaz do vráceného kódu po posledním odstavci s množstvím produktu a před zavíracím divem:

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

Také importujeme Link z knihovny routeru:

products/ProductPage.jsximport { Link } from 'react-router-dom'

Spustíme naši aplikaci a klikneme na tlačítko zobrazení nějakého produktu. Zkusme ho upravit a vraťme se zpět k seznamu produktů kliknutím na odkaz 'Products' v levé nabídce. Také v Redux DevTools můžete vidět novou akci productUpdated a podívat se na změny objektu s produktem v store.