Przekierowanie na inną trasę w React Router

Teraz dane wprowadzone do formularza przy edycji produktu są zapisywane, ale jest jedno ALE - po zapisaniu danych pozostajemy na stronie z formularzem, a my musimy wrócić na stronę produktu. W tym pomoże nam przekierowanie, z którym zapoznamy się w tej lekcji.

Otwórzmy plik edit.jsx i zaimportujmy redirect z biblioteki:

import { redirect } from 'react-router-dom';

A następnie sprawmy, że funkcja action będzie teraz zwracać nie 1, a przekierowywać nas na potrzebną trasę. W tym przypadku my musimy wrócić z powrotem na stronę produktu:

return redirect(`/products/${params.productId}`);

Teraz, klikając przycisk zapisywania, my wracamy z powrotem na stronę produktu z zaktualizowanymi danymi.

Wszystko to samo możemy wykonać i dla dodania nowego produktu, ponieważ prawdopodobnie byłoby wygodniej od razu przejść do formularza i wypełnić go. Zróbmy tak.

Na początku musimy teraz otworzyć plik root.jsx i zaimportować redirect, ponieważ dodawanie produktów odbywa się na stronie głównej:

import { redirect } from 'react-router-dom';

Ponownie bierzemy funkcję action i teraz będziemy zwracać nie product, a wykonywać przekierowanie na stronę edycji:

return redirect(`/products/${product.id}/edit`);

Sprawdźmy i to. Kliknijmy teraz na przycisk dodania produktu i zobaczymy formularz do jego edycji.

Weź aplikację stworzoną przez ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, zaimplementuj w niej przekierowanie na stronę studenta po naciśnięciu przycisku zapisywania danych na stronie z formularzem.

A teraz zaimplementuj przekierowanie ze strony głównej na stronę z formularzem edycji danych studenta po kliknięciu przycisku dodania studenta do listy.