Пренасочување на друг пат во 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`);
Да го провериме и ова. Сега кликнете на копчето за додавање производ и ќе ја видите формата за негово уредување
Земете ја апликацијата, создадена од вас во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, имплементирајте во неа пренасочување на страницата на студентот после кликнување на копчето за зачувување на податоците на страницата со формулар.
А сега имплементирајте пренасочување од главната страница на страницата со формулар за уредување на податоците на студентот после клик на копчето за додавање студент во листата.
