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`);

Мұны тексеріп көрейік. Енді өнім қосу түймесін бассақ, оны өңдеу формасын көреміз.

Алдыңғы сабақтардың тапсырмаларында жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, онда формасы бар беттегі деректерді сақтау түймесін басқаннан кейін студент бетіне қайта бағыттауды жүзеге асырыңыз.

Енді студентті тізімге қосу түймесіне басқаннан кейін негізгі беттен студент деректерін өңдеу формасына қайта бағыттауды жүзеге асырыңыз.