Product edit page in browser in Redux

In the last lesson we made a form for editing a product. Let's attach a route to it.

Let's open our product app, and in it the App.jsx file, and add another child route object to the array for the children property (don't forget to import EditProductForm):

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

Also, to go to the editing form, we need to make a link. Let's open ProductPage.jsx for this and place this link in the returned layout after the last paragraph with the product quantity and before the closing div:

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

We also import Link from the router library:

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

Let's run our app and click on the view button of some product. Let's try to edit it and go back to the list of products by clicking on the 'Products' link in the left menu. Also in Redux DevTools you can see the new productUpdated action and see the changes to the product object in the store.

Open your students app. In the App.jsx file, add another child route to edit student data.

Add the Link element to the layout on the student page to go to the page for editing his data.

Run your app, try editing some student data. Pay attention to the browser address bar when you are on the editing page. See the changes in the browser Redux DevTools.