Пренасочване към друг маршрут в 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`);
Нека проверим и това. Сега ще кликнем върху бутона за добавяне на продукт и ще видим форма за неговото редактиране
Вземете приложението, създадено от вас в задачите към предишните уроци. Използвайки материалите от урока, реализирайте в него пренасочване към страницата на студента след натискане на бутона за запазване на данни на страницата с формата.
А сега реализирайте пренасочване от главната страница към страницата с формата за редактиране на данни на студент след кликване върху бутона за добавяне на студент в списъка.
