Página de edición de producto en el navegador en Redux
En la lección anterior creamos un formulario para editar productos. Ahora vamos a configurar una ruta para él.
Abramos nuestra aplicación de productos,
y en ella el archivo App.jsx y agreguemos un
objeto más de ruta hija en el
array para la propiedad children (no
olvide importar EditProductForm):
App.jsx{
path: '/editProduct/:productId',
element: <EditProductForm />,
},
También para navegar al formulario de edición
necesitamos crear un enlace. Para ello abramos
ProductPage.jsx y coloquemos este enlace en
el JSX retornado después del último párrafo
con la cantidad del producto y antes del div de cierre:
products/ProductPage.jsx<Link to={`/editProduct/${product.id}`} className="link-btn">
edit
</Link>
También importemos Link desde la librería del router:
products/ProductPage.jsximport { Link } from 'react-router-dom'
Ejecutemos nuestra aplicación y hagamos clic en el botón
de ver algún producto. Intentemos
editarlo y volvamos atrás
a la lista de productos, haciendo clic en el enlace
'Products' en el menú de la izquierda. También en Redux
DevTools puedes ver la nueva acción
productUpdated y observar los cambios
del objeto producto en el store.
Abra su aplicación de estudiantes.
En el archivo App.jsx agregue otra ruta hija
para editar los datos de un estudiante.
Agregue un elemento Link en el JSX de
la página del estudiante para navegar a
la página de edición de sus datos.
Ejecute su aplicación, intente editar los datos de algún estudiante. Preste atención a la barra de direcciones del navegador cuando esté en la página de edición. Observe los cambios en Redux DevTools del navegador.