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