Lær React Router på 5 minutter - En begyndervejledning

Nogle gange har du kun 5 minutter til overs. I stedet for at spilde det på sociale medier, lad os få en 5-minutters introduktion til React-Router! I denne vejledning lærer vi det grundlæggende i routing i React ved at opbygge navigation til et Scrimba strikbutiks websted. Det er ikke rigtigt, men måske en dag ...;)

Hvis du vil have en ordentlig introduktion til dette emne, kan du tilmelde dig ventelisten til mit kommende avancerede React-kursus, eller hvis du stadig er nybegynder, skal du tjekke mit introduktionskursus om React.

Hvad er React-Router alligevel?

Mange moderne hjemmesider består faktisk af en enkelt side, de ligner bare flere sider, fordi de indeholder komponenter, der gengives som separate sider. Disse er normalt henvist til som SBO - s ingle- p alder en nsøgning. I sin kerne er, hvad React Router gør, betinget at visse komponenter vises, afhængigt af den rute, der bruges i URL'en ( /til startsiden, /aboutom siden osv.).

For eksempel kan vi bruge React Router til at forbinde www.knit-with-scrimba.com/ til www.knit-with-scrimba.com/about eller www.knit-with-scrimba.com/shop

Lyder godt - hvordan bruger jeg det?

For at bruge React Router skal du først installere den ved hjælp af NPM:

npm install react-router-dom 

Alternativt kan du bare bruge denne legeplads i Scrimba, som allerede har skrevet den færdige kode.

Du skal importere BrowserRouter, rute og skifte fra react-router-dompakke:

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

I mit eksempel forbinder jeg destinationssiden med to andre "sider" (som faktisk kun er komponenter) kaldet Shopog About.

Først skal du konfigurere din app til at arbejde med React Router. Alt, der bliver gengivet, skal gå inde i elementet, så pakk din app ind i dem først. Det er den komponent, der gør al logikken ved at vise forskellige komponenter, som du giver den.

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

Derefter skal du tilføje Switchelementet i din App-komponent (åbne og lukke tags). Disse sikrer, at kun én komponent gengives ad gangen. Hvis vi ikke bruger dette, kan vi som standard Errorkomponenten, som vi skriver senere.

function App() { return (     ) } 

Det er nu tid til at tilføje dine tags. Dette er forbindelserne mellem komponenterne og skal placeres inde i tags.

For at fortælle tags, hvilken komponent der skal indlæses, skal du blot tilføje en pathattribut og navnet på den komponent, du vil indlæse med componentattribut.

Mange webadresser til hjemmesiden er webstedsnavnet efterfulgt af "/"for eksempel www.knit-with-scrimba.com/ . I dette tilfælde føjer vi exacttil rutekoden. Dette skyldes, at de andre webadresser også indeholder "/", så hvis vi ikke fortæller appen, at den kun skal kigge efter /, indlæses den første, der matcher ruten, og vi får en temmelig vanskelig fejl at håndtere.

function App() { return (        ) } 

Importér nu komponenterne i appen. Du ønsker måske at have dem i en separat "komponenter" -mappe for at holde koden ren og læsbar.

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

På den fejlmeddelelse, jeg nævnte tidligere, indlæses, hvis en bruger skriver en forkert URL. Dette er ligesom et normalt tag, men uden sti. Fejlkomponenten indeholder

Oops! Page not found!

. Glem ikke at importere det til appen.

function App() { return (         ) } 

Indtil videre kan vores websted kun navigeres ved at skrive webadresserne. For at tilføje klikbare links til webstedet bruger vi Linkelementet fra React Router og opretter en ny Navbarkomponent. Glem ikke at importere den nye komponent til appen igen.

Tilføj nu en Linkfor hver komponent i appen og brug to="URL"til at linke dem.

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

Dit websted har nu klikbare links, der kan navigere dig rundt i din app til en enkelt side!

Konklusion

Så der har vi det. Hvis du let vil navigere rundt i en React-app, skal du glemme ankermærkerne og tilføje React Router. Det er rent, det er organiseret, og det gør tilføjelse og sletning af sider meget lettere.

For at lære mere om React Hooks og andre fantastiske funktioner i React, kan du tilmelde dig ventelisten til mit kommende avancerede React-kursus.

Eller hvis du leder efter noget mere nybegyndervenligt, kan du tjekke mit introduktionskursus om React.

Glad kodning;)