Lekce 14 - Databázový klient v React - Odkazy na formuláře a API metody

V minulé lekci, Databázový klient v React - Formulářová komponenta osobností, jsme vytvořili formulářovou komponentu pro osobnosti a spolu s hotovou komponentou pro filmy jsme přidali odkazy k jejich zobrazení do komponent přehledů.

V tomto React tutoriálu přidáme do přehledu filmů a osob odkazy na jejich vytvoření a editaci. Dále rozšíříme náš API wrapper o POST, PUT a DELETE požadavky, abychom pomocí něj dále v kurzu mohli položky do databáze opravdu přidávat, editovat i mazat je.

Zobrazení odkazů na formuláře

Obě formulářové komponenty máme hotové, zbývá přidat odkazy na ně do výpisu filmů a osob.

Úprava navigace v App

Nejprve si pro nové stránky s formuláři musíme připravit navigaci. Tu máme v komponentě App.

Importy

Na začátek souboru App.jsx doplníme importy formulářů pro filmy a osoby:

...
import MovieForm from "./movies/MovieForm";
import PersonForm from "./persons/PersonForm";

Cesty pro prohlížení filmů i osob máme již rozvětvené kvůli zobrazení detailu cestou show/:id. Nyní pro každou komponentu definujeme ještě další dvě cesty:

• create - stránka s formulářem pro vytvoření (bez parametru),
• edit/:id - stránka pro editaci (s parametrem :id).

Celý obsah elementu <Routes> bude vypadat takto:

...konec náhledu článku...
Pokračuj dál