a
React Router
Kurssin seitsemännen osan tehtävät poikkeavat jossain määrin muiden osien tehtävistä. Tässä ja seuraavassa luvussa on normaaliin tapaan luvun teoriaan liittyviä tehtäviä.
Tämän ja seuraavan luvun tehtävien lisäksi seitsemäs osa sisältää kertaavan ja soveltavan tehtäväsarjan, jossa laajennetaan osissa 4 ja 5 tehtyä Bloglist-sovellusta.
React Router
Tämän luvun materiaali siirtynyt osaan 5. Voit kuitenkin edelleen tehdä aiheeseen liittyvät tehtävät.
Tehtävät 7.1.-7.3.
Jatketaan anekdoottien parissa. Ota seuraaviin tehtäviin pohjaksi repositoriossa https://github.com/fullstack-hy2020/routed-anecdotes oleva Reduxiton anekdoottisovellus.
Jos kloonaat projektin olemassaolevan Git-repositorion sisälle, poista kloonatun sovelluksen Git-konfiguraatio:
cd routed-anecdotes // eli mene ensin kloonatun repositorion hakemistoon
rm -rf .gitSovellus käynnistyy normaaliin tapaan, mutta joudut ensin asentamaan sovelluksen riippuvuudet:
npm install
npm run dev7.1: routed anecdotes, step1
Lisää sovellukseen React Router siten, että Menu-komponentissa olevia linkkejä klikkailemalla saadaan säädeltyä näytettävää näkymää.
Sovelluksen juuressa eli polulla / näytetään anekdoottien lista:
Pohjalla oleva Footer-komponentti tulee näyttää aina.
Uuden anekdootin luominen tapahtuu esim. polulla create:
7.2: routed anecdotes, step2
Toteuta sovellukseen yksittäisen anekdootin tiedot näyttävä näkymä:
Yksittäisen anekdootin sivulle navigoidaan klikkaamalla anekdootin nimeä:
7.3: routed anecdotes, step3
Luomislomakkeen oletusarvoinen toiminnallisuus on melko hämmentävä, sillä kun lomakkeen avulla luodaan uusi muistiinpano, mitään ei näytä tapahtuvan.
Paranna toiminnallisuutta siten, että luomisen jälkeen siirrytään automaattisesti kaikkien anekdoottien näkymään ja käyttäjälle näytetään viiden sekunnin ajan onnistuneesta lisäyksestä kertova notifikaatio:
