Redirect to another route in React Router
Now the data entered into the form when editing the product is saved, but there is one BUT - after saving the data we remain on the page with the form, and we need to get back to the product page. Redirect will help us with this, which we will get to know in this lesson.
Let's open the edit.jsx file and import redirect from the library:
import { redirect } from 'react-router-dom';
And then we'll make it so that the action function will now return not 1, but redirect us to the desired route. In this case, we need to return back to the product page:
return redirect(`/products/${params.productId}`);
Now, by clicking the save button, we are taken back to the product page with updated data.
We can do the same thing to add a new product, because it would probably be more convenient to go straight to the form and fill it out. Let's do that.
To begin, we now need to open the root.jsx file and import redirect, since adding products happens on the root page:
import { redirect } from 'react-router-dom';
Let's take the action function again and now we will not return product, but redirect to the editing page:
return redirect(`/products/${product.id}/edit`);
Let's check this too. Now click on the button to add a product and we will see a form for editing it.
Take the application you created in the assignments for the previous lessons. Using the lesson materials, implement a redirect to the student's page after pressing the save data button on the page with the form.
Now implement a redirect from the main page to the page with the student data editing form after clicking on the button to add a student to the list.
