05. Kreiranje izbornika - kristijan-perkovic96/Osnove-reacta GitHub Wiki

Svaka aplikacija mora imati neku vrstu navigacije. Čak i najjednostavnije web stranice imaju navigaciju u smislu Početna, O nama, Kontakt i slično. Navigaciju možemo kreirati na 2 načina. Možemo koristiti link ili možemo prema nekome statutu unutar glavne komponente odlučiti koja će se komponenta prikazivati.

Napravit ćemo oba slučaja kako biste mogli primijeniti neke od ovih stvari u svojim aplikacijama. Znam da će vas sigurno zanimati kako u ovisnosti o statusu prikazati neki drugi podatak, recimo ako želite dinamički promijeniti neki gumb kao u slučaju da vam se prikazuje gumb aktiviraj ili deaktiviraj ovisno o statusu. Na sličan način će raditi prva navigacija koju ćemo kreirati. Za izbornik ćemo koristiti klasnu komponentu jer je praktičnija za korištenje grananja u render metodi. Kreirali smo state koji sadrži jednu varijablu prikaz te u ovisnosti o toj vrijednosti ćemo definirati koja će se komponenta prikazati.

Kao što je na slici definirali smo jednu varijablu čija vrijednost je zapravo jedna od komponenti u ovisnosti o varijabli this.state.prikaz unutar return-a smo definirali da želimo imati tri gumba te da nam se prikaže željena komponenta. Vjerojatno ste do sada primijetili da ako želimo koristiti JavaScript kod unutar return-a da moramo koristiti vitičaste zagrade. Komponente Početna, ONama i Kontakt su jednake komponente te samo ispisuju o kojoj se radi. Inicijalno se prikazuje Početna jer je u state-u tako definirano.

Drugi tip navigacije je baš onaj kakav se koristi u svim web aplikacija, onaj koji vam je poznat još iz HTML-a gdje koristite html element link te mijenjate URL. Kako biste koristili taj način morate u u terminal upisati npm i react-router-dom nakon što vam se sve instalira što treba tada možete nastaviti s radom. Za kreiranje izbornika potreban vam je BrowserRouter, Switch, Route i Link. BrowerRouter vam omogućava da izmjenjujte URL, da vaše komponente budu sinkronizirane s URL-om i općenito rad s lokacijom. Switch kao i u ostalim programskim jezicima predstavlja grananje te umjesto case u ovom slučaju imamo Route koji definira na kojojem se URL-u nalazi koja komponenta. Link nam definira na koji će se URL preći ukoliko pritisnemo na njega. Možete primijetiti da u Route koristimo exact path umjesto samo path to je iz razloga jer ako ne navedemo exact tada se neće mijenjati komponenta koja se treba prikazati jer ako uzmemo pri Route ** ** možemo vidjeti da je putanja / što pokriva sve slučajeve jer svaki path započinje s /.

Možemo vidjeti na slici ispod da kod radi jer imamo putanju http://localhost:3000/Onama te se ispisuje O nama.

Naravno ovose sve može iskoristiti i za neke druge primjene. Recimo da kreirate web shop te želite imati komponentu za prikaz proizvoda, naravno da nećete kreirati stotine različitih komponenti jer to bi bilo suludo. Kreirat će te jednu komponentu koja će služiti za prikaz svih proizvoda pojedinačno na način da će te proslijediti neke podatke u samu komponentu. Na primjer možete proslijediti id proizvoda te na temelju id-a dohvatiti sa api-a podatke o tome proizvodu. To možete postići na način da Route definirate na sljedeći način : <Route exact path="/proizvod:id" render={({ match}) => ( )}/> Varijabilni dio putanje je id te se on može mijenjati. Unutar komponente možete tome podatku pristupiti na sljedeći način:

Naravno u velikom broju slučajeva htjeli biste prenijeti podatke i sa samog Link-a te to možete napraviti na način da Route definirate na sljedeći način:

te naravno moramo prilagoditi i Link na sljedeći način:

Tome podatku možete pristupiti pomoću: props.location.state.podatak

Ukoliko kliknete kliknete u izborniku na Proizvod tada možete primijetiti da smo uspješno pristupili id-u iz URL-a te da smo uspješno pristupili proslijeđenom podatku.