Página de edição de produto no navegador no Redux

Na lição anterior, criamos um formulário para edição de produto. Vamos adicionar uma rota para ele.

Abra nossa aplicação de produtos, e nela o arquivo App.jsx e adicione mais um objeto de rota filha no array para a propriedade children (não se esqueça de importar EditProductForm):

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

Também, para navegar até o formulário de edição precisamos criar um link. Para isso, abra ProductPage.jsx e coloque este link no JSX retornado, após o último parágrafo com a quantidade do produto e antes da div de fechamento:

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

Também importe Link da biblioteca do roteador:

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

Inicie nossa aplicação e clique no botão de visualização de algum produto. Tente editá-lo e volte para a lista de produtos, clicando no link 'Products' no menu à esquerda. Também no Redux DevTools você pode ver uma nova action productUpdated e ver as mudanças do objeto do produto na store.