Õppige ruuterit reageerima 5 minutiga - õpetus algajatele

Mõnikord on teil aega ainult 5 minutit. Sotsiaalmeedias raiskamise asemel toome React-Routeri 5-minutilise sissejuhatuse! Selles õpetuses õpime Reactis marsruutimise põhitõdesid, ehitades navigatsiooni Scrimba kudumispoe veebisaidile. See pole päris, aga võib-olla ühel päeval ...;)

Kui soovite selle teema korralikku sissejuhatust, võite liituda minu eelseisva edasijõudnute Reageerimiskursuse ootelehega või kui olete alles algaja, vaadake minu sissejuhatavat kursust teemal React.

Mis on React-Router ikkagi?

Paljud tänapäevased veebisaidid koosnevad tegelikult ühest lehest, need näevad välja lihtsalt mitu lehte, kuna sisaldavad komponente, mis renderdatakse nagu eraldi lehed. Need on tavaliselt nimetatakse erikaitsealadena - s ingle- p vanuse pplications. Reaalsuse ruuter teeb oma olemuselt tingimusena teatud komponentide kuvamise sõltuvalt URL-is kasutatavast marsruudist ( avalehe, umbes lehe jaoks jne).//about

Näiteks saame kasutada Lasta ruuter ühendada www.knit-with-scrimba.com/ et www.knit-with-scrimba.com/about või www.knit-with-scrimba.com/shop

Kõlab suurepäraselt - kuidas seda kasutada?

React Routeri kasutamiseks peate selle esmalt installima NPM-i abil:

npm install react-router-dom 

Teise võimalusena võite lihtsalt kasutada seda mänguväljakut Scrimbas, kus täielik kood on juba kirjutatud.

Peate importima paketist BrowserRouter, Route ja Switch react-router-dom:

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

Oma näites seon maandumislehe veel kahe "lehega" (mis on tegelikult vaid komponendid), millele helistati Shopja About.

Esiteks peate oma rakenduse seadistama reageerima ruuteriga. Kõik, mis renderdatakse, peab minema elemendi sisse, nii et pakkige oma rakendus kõigepealt nendesse. See on komponent, mis täidab kogu pakutavate komponentide kogu loogika.

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

Järgmisena lisage oma rakenduse komponendis Switchelement (avatud ja sulgevad sildid). Need tagavad, et korraga renderdatakse ainult üks komponent. Kui me seda ei kasuta, võime vaikimisi kasutada Errorkomponenti, mille kirjutame hiljem.

function App() { return (     ) } 

Nüüd on aeg lisada oma sildid. Need on komponentide vahelised lingid ja need tuleks paigutada siltide sisse.

Siltidele ütlemiseks, millist komponenti laadida, lisage lihtsalt pathatribuut ja komponendi nimi, mille soovite componentatribuudiga laadida .

Paljud kodulehe URL-id on saidi nimi, millele järgneb "/"näiteks www.knit-with-scrimba.com/ . Sellisel juhul lisame exactmärgendi Route. Selle põhjuseks on asjaolu, et muud URL-id sisaldavad ka "/", nii et kui me ei ütle rakendusele, et see peab otsima lihtsalt /, laadib see esimese marsruudile vastava ja saame üsna keeruka vea, millega tegeleda.

function App() { return (        ) } 

Nüüd importige komponendid rakendusse. Võiksite soovida, et need oleksid eraldi kaustas "komponendid", et kood oleks puhas ja loetav.

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

Sellele varem mainitud veateatele, mis laaditakse, kui kasutaja sisestab vale URL-i. See on täpselt nagu tavaline silt, kuid ilma teeta. Vea komponent sisaldab

Oops! Page not found!

. Ärge unustage seda rakendusse importida.

function App() { return (         ) } 

Siiani on meie saidil navigeeritav ainult URL-ide sisestamine. Klõpsatavate linkide lisamiseks saidile kasutame LinkReact Routeri elementi ja seadistame uue Navbarkomponendi. Ärge unustage veel kord uut komponenti rakendusse importida.

Nüüd lisage Linkrakenduses iga komponendi jaoks a ja kasutage to="URL"nende linkimiseks.

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

Teie saidil on nüüd klõpsatavad lingid, mis võimaldavad teil navigeerida teie ühe lehe rakenduses!

Järeldus

Nii et meil on see olemas. Kui soovite rakenduses React hõlpsasti navigeerida, unustage ankrumärgendid ja lisage React Router. See on puhas, korrastatud ja see muudab lehtede lisamise ja kustutamise palju lihtsamaks.

React Hooksi ja muude Reacti suurepäraste funktsioonide kohta lisateabe saamiseks võite liituda minu eelseisva täpsema Reacti kursuse ootelehega.

Või kui otsite midagi algajale sõbralikumat, võite vaadata minu sissejuhatavat kursust teemal React.

Head kodeerimist;)