Přesměrování na jinou trasu v React Router

Nyní se data zadaná do formuláře při editaci produktu ukládají, ale je jedno ALE - po uložení dat zůstaneme na stránce s formulářem, a my se potřebujeme vrátit zpět na stránku produktu. S tím nám pomůže přesměrování, s kterým se seznámíme v této lekci.

Pojďme otevřít soubor edit.jsx a importovat redirect z knihovny:

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

A pak uděláme to, že funkce action bude nyní vracet ne 1, ale přesměruje nás na požadovanou trasu. V tomto případě se potřebujeme vrátit zpět na stránku s produktem:

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

Nyní, po kliknutí na tlačítko uložení, se dostaneme zpět na stránku produktu s aktualizovanými daty.

To samé můžeme udělat i pro přidání nového produktu, protože by bylo pravděpodobně pohodlnější okamžitě přejít na formulář a vyplnit jej. Pojďme to udělat.

Pro začátek je nyní nutné otevřít soubor root.jsx a importovat redirect, protože přidání produktů probíhá na kořenové stránce:

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

Znovu vezmeme funkci action a nyní budeme vracet ne product, ale provést přesměrování na stránku editace:

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

Pojďme to zkontrolovat. Klikněme nyní na tlačítko přidání produktu a uvidíme formulář pro jeho editaci.

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. S využitím materiálů lekce v ní implementujte přesměrování na stránku studenta po kliknutí na tlačítko uložení dat na stránce s formulářem.

A nyní implementujte přesměrování z hlavní stránky na stránku s formulářem pro editaci dat studenta po kliku na tlačítko přidání studenta do seznamu.