Preusmeritev na drugo pot v React Router

Podatki, vneseni v obrazec pri urejanju izdelka, so zdaj shranjeni, vendar obstaja en AMPAK - po shranjevanju podatkov ostanemo na strani z obrazcem, morali pa bi se vrniti na stran izdelka. Pri tem nam bo pomagala preusmeritev, s katero se bomo spoznali v tej lekciji.

Odprimo datoteko edit.jsx in uvozimo redirect iz knjižnice:

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

Nato naredimo tako, da funkcija action zdaj vrne ne 1, ampak nas preusmeri na zahtevano pot. V tem primeru se moramo vrniti nazaj na stran z izdelkom:

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

Zdaj, ko kliknemo gumb za shranjevanje, pristanko nazaj na stran izdelka s posodobljenimi podatki.

Vse enako lahko naredimo tudi za dodajanje novega izdelka, saj bi bilo verjetno bolj priročno takoj preiti na obrazec in ga izpolniti. Naredimo tako.

Za začetek moramo zdaj odpreti datoteko root.jsx in uvozti redirect, ker dodajanje izdelkov poteka na korenski strani:

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

Spet vzamemo funkcijo action in zdaj bomo vrnili ne product, ampak naredili preusmeritev na stran za urejanje:

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

Preverimo tudi to. Kliknimo zdaj na gumb za dodajanje izdelka in videli bomo obrazec za njegovo urejanje.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva lekcije implementirajte v njej preusmeritev na stran študenta po kliku na gumb za shranjevanje podatkov na strani z obrazcem.

In zdaj implementirajte preusmeritev z glavne strani na stran z obrazcem za urejanje podatkov študenta po kliku na gumb za dodajanje študenta v seznam.