Naučite Reagirati usmjerivač u 5 minuta - Vodič za početnike

Ponekad imate samo 5 minuta slobodnih. Umjesto da ga trošimo na društvenim mrežama, idemo na petominutni uvod u React-Router! U ovom uputstvu naučit ćemo osnove usmjeravanja u Reactu izgradnjom navigacije za web mjesto Scrimba pletiva. Nije stvarno, ali možda jednog dana ...;)

Ako želite pravi uvod u ovu temu, možete se pridružiti listi čekanja za moj predstojeći napredni tečaj React, ili ako ste još uvijek početnik, pogledajte moj uvodni tečaj o Reactu.

Što je uopće React-Router?

Mnoga moderna web mjesta zapravo se sastoje od jedne stranice, samo izgledaju kao više stranica, jer sadrže komponente koje se prikazuju poput zasebnih stranica. To su obično nazivaju Toplice - S ingle- p dobi od pplications. U osnovi, ono što React Router čini je da uvjetno prikazuje određene komponente za prikaz, ovisno o ruti koja se koristi u URL-u ( /za početnu stranicu, /aboutza približno stranicu, itd.).

Na primjer, React Router možemo koristiti za povezivanje www.knit-with-scrimba.com/ na www.knit-with-scrimba.com/about ili www.knit-with-scrimba.com/shop

Zvuči sjajno - kako da ga koristim?

Da biste koristili React Router, prvo ga morate instalirati pomoću NPM-a:

npm install react-router-dom 

Možete koristiti i ovo igralište u Scrimbi, koje ima već napisani dovršeni kod.

Morat ćete uvesti BrowserRouter, Route i Switch iz react-router-dompaketa:

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

U svom primjeru odredišnu stranicu povezujem s dvije druge "stranice" (koje su zapravo samo komponente) pozvane Shopi About.

Prvo ćete morati postaviti svoju aplikaciju za rad s React Routerom. Sve što se generira morat će ući u element, pa umotajte svoju aplikaciju u one prve. To je komponenta koja čini svu logiku prikazivanja različitih komponenti koje joj pružate.

// index.js ReactDOM.render(   , document.getElementById('root') ) 

Dalje, u komponentu aplikacije dodajte Switchelement (oznake za otvaranje i zatvaranje). Oni osiguravaju da se istodobno generira samo jedna komponenta. Ako ovo ne upotrijebimo, možemo zadati Errorkomponentu koju ćemo kasnije napisati.

function App() { return (     ) } 

Vrijeme je da dodate svoje oznake. To su veze između komponenata i trebale bi biti smještene unutar oznaka.

Da biste oznakama označili koju komponentu treba učitati, jednostavno dodajte pathatribut i ime komponente koju želite učitati s componentatributom.

Mnogi URL-ovi početnih stranica naziv su web mjesta nakon kojeg slijedi "/", na primjer, www.knit-with-scrimba.com/ . U ovom slučaju dodajemo exactoznaku Ruta. To je zato što i ostali URL-ovi sadrže "/", pa ako aplikaciji ne kažemo da treba samo tražiti /, učitava prvu koja odgovara ruti i dobit ćemo prilično nezgodnu pogrešku.

function App() { return (        ) } 

Sada uvezite komponente u aplikaciju. Možda biste ih željeli imati u zasebnoj mapi "komponente" kako bi kod bio čist i čitljiv.

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

Na tu poruku o pogrešci koju sam ranije spomenuo, a koja se učitava ako korisnik upiše netočan URL. Ovo je poput normalne oznake, ali bez puta. Komponenta pogreške sadrži

Oops! Page not found!

. Ne zaboravite ga uvesti u aplikaciju.

function App() { return (         ) } 

Do sada je naša stranica dostupna samo upisivanjem URL-ova. Da bismo dodali linkove na koje je moguće kliknuti na web stranicu, koristimo Linkelement iz React Routera i postavimo novu Navbarkomponentu. Još jednom, ne zaboravite uvesti novu komponentu u aplikaciju.

Sada dodajte Linkza svaku komponentu u aplikaciji i upotrijebite ih to="URL"za povezivanje.

function Navbar() { return ( Home  About Us  Shop Now ); }; 

Vaša web lokacija sada ima veze na koje se može kliknuti i koje vas mogu kretati kroz vašu aplikaciju na jednoj stranici!

Zaključak

Eto, imamo ga. Ako se želite lako kretati oko React aplikacije, zaboravite oznake sidra i dodajte React Router. Čisto je, organizirano je i puno olakšava dodavanje i brisanje stranica.

Da biste saznali više o React Hooks i ostalim sjajnim značajkama React-a, možete se pridružiti listi čekanja za moj nadolazeći React tečaj.

Ili ako tražite nešto više za početnike, možete pogledati moj uvodni tečaj o Reactu.

Sretno kodiranje;)