Перанакіраванне на другі маршрут у 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`);
Праверым і гэта. Клікнем цяпер на кнопку дадання прадукту і ўбачым форму для яго рэдагавання
Вазьміце дадатак, створанае вамі ў заданнях да мінулых урокаў. Карыстаючыся матэрыяламі ўрока, рэалізуйце ў ім перанакіраванне на староначку студэнта пасля націскання кнопкі захавання даных на старонцы з формай.
А цяпер рэалізуйце перанакіраванне з галоўнай старонкі на старонку з формай рэдагавання даных студэнта пасля кліка па кнопцы дадання студэнта ў спіс.
