Omdirigering till en annan rutt i React Router
Nu sparas data som anges i formuläret vid redigering av produkten, men det finns ett MEN - efter att data har sparats stannar vi kvar på sidan med formuläret, och vi måste komma tillbaka till produktsidan. Omdirigering kommer att hjälpa oss med detta, som vi kommer att bekanta oss med i den här lektionen.
Låt oss öppna filen edit.jsx
och importera redirect från
biblioteket:
import { redirect } from 'react-router-dom';
Och sedan se till att funktionen
action nu returnerar
inte 1, utan omdirigerar oss
till den önskade rutten. I det här fallet
behöver vi återgå tillbaka till
produktsidan:
return redirect(`/products/${params.productId}`);
Nu, när vi klickar på spara-knappen, kommer vi tillbaka till produktsidan med uppdaterad data.
Vi kan göra samma sak även för att lägga till en ny produkt, eftersom det förmodligen vore bekvämare att direkt komma till formuläret och fylla i det. Låt oss göra så.
Först måste vi nu öppna
filen root.jsx och importera
redirect, eftersom tillägg
av produkter sker på rotsidan:
import { redirect } from 'react-router-dom';
Ta funktionen action igen och
kommer nu att returnera inte product,
utan göra en omdirigering till redigeringssidan:
return redirect(`/products/${product.id}/edit`);
Låt oss testa även detta. Klicka nu på knappen för att lägga till produkt och vi kommer att se formuläret för dess redigering.
Ta applikationen som du skapade i uppgifterna till tidigare lektioner. Använd lektionens material, implementera i den en omdirigering till studentsidan efter att ha klickat på spara-knappen på sidan med formuläret.
Och implementera nu en omdirigering från huvudsidan till sidan med formuläret för att redigera studentdata efter klick på knappen för att lägga till student i listan.
