Редирект на другой маршрут в React Router
Теперь данные занесенные в форму при редактировании продукта сохраняются, но есть одно НО - после сохранения данных мы остаемся на странице с формой, а нам надо попасть обратно на страничку продукта. В этом нам поможет редирект, с которым мы познакомимся на этом уроке.
Давайте откроем файл edit.jsx
и импортируем redirect из
библиотеки:
import redirect from 'react-router-dom';
А затем сделаем так, что функция
action будет теперь возвращать
не 1, а перенаправлять нас
на нужный маршрут. В данном случае
нам необходимо вернуться обратно на
страничку с продуктом:
return redirect(`/products/${params.productId}`);
Теперь, нажимая кнопку сохранения, мы попадаем обратно на страничку продукта с обновленными данными.
Все тоже самое мы можем проделать и для добавления нового продукта, ведь наверное было бы удобней сразу выходить на форму и заполнять ее. Давайте так и сделаем.
Для начала нам необходимо теперь открыть
файл root.jsx и импортировать
redirect. Поскольку добавление
продуктов происходит на корневой страничке:
import redirect from 'react-router-dom';
Снова берем функцию action и
теперь будем возвращать не product,
а делать редирект на страничку
редактирования:
return redirect(`/products/${product.id}/edit`);
Проверим и это. Кликнем теперь на кнопку добавления продукта и увидим форму для его редактирования
Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, реализуйте в нем редирект на страничку студента после нажатия кнопки сохранения данных на страничке с формой.
А теперь реализуйте редирект с главной страницы на страницу с формой редактирования данных студента после клика по кнопке добавления студента в список.