Ismerje meg a React Router öt perc alatt - kezdőknek szóló oktatóanyagot

Néha csak 5 perc áll rendelkezésére. Ahelyett, hogy a közösségi médiára pazarolnánk, készítsünk egy 5 perces bevezetést a React-Router-ről! Ebben az oktatóanyagban megtanuljuk az útválasztás alapjait a React-ben, navigációt építve a Scrimba kötőbolt webhelyéhez. Nem valóságos, de talán egyszer ...;)

Ha megfelelő bevezetést szeretnél kapni ehhez a témához, csatlakozhatsz a közelgő haladó React tanfolyamom várólistájához, vagy ha még kezdő vagy, nézd meg a React bevezető tanfolyamomat.

Mi is az a React-Router?

Sok modern weboldal valójában egyetlen oldalból áll, csak több oldalnak tűnnek, mert olyan összetevőket tartalmaznak, amelyek külön oldalakként renderelnek. Ezek általában a továbbiakban a KVT - s ingle- p kor a pplications. Lényege, hogy a React Router bizonyos feltételekkel megjelenít bizonyos összetevőket az URL-ben használt útvonaltól függően ( /a kezdőlap, /abouta körülbelül oldal stb. Számára).

Például használhatjuk a React Routert a www.knit-with-scrimba.com/ webhelyhez a www.knit-with-scrimba.com/about vagy a www.knit-with-scrimba.com/shop webhelyhez.

Remekül hangzik - hogyan használjam?

A React Router használatához először az NPM használatával kell telepítenie:

npm install react-router-dom 

Alternatív megoldásként használhatja ezt a Scrimba-i játszóteret, amelyre a teljes kód már be van írva.

Importálnia kell a BrowserRouter, Route és Switch from pack react-router-domcsomagot:

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

Az én példámban összekapcsolom a céloldalt két másik "oldallal" (amelyek valójában csak alkotóelemek), amelyek neve Shopés About.

Először be kell állítania alkalmazását, hogy működjön a React Routerrel. Minden, ami megjelenik, az elem belsejében kell lennie , ezért először csomagolja be az alkalmazást. Ez az a komponens, amelyik teljesíti a különféle összetevők megjelenítésének logikáját, amelyet Ön biztosít.

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

Ezután az App összetevőjében adja hozzá az Switchelemet (nyitó és záró címkék). Ezek biztosítják, hogy egyszerre csak egy komponens legyen megjelenítve. Ha ezt nem használjuk, alapértelmezés szerint beállíthatjuk az Errorösszetevőt, amelyet később írunk.

function App() { return (     ) } 

Itt az ideje hozzáadni a címkéket. Ezek a kapcsolatok az összetevők között, és azokat a címkékbe kell helyezni .

Ha meg szeretné mondani a címkéknek, hogy melyik összetevőt töltse be, egyszerűen adjon hozzá egy pathattribútumot és annak az összetevőnek a nevét, amelyet be akar tölteni az componentattribútummal.

Sok kezdőlap URL-címe a webhely neve, amelyet "/"például a www.knit-with-scrimba.com/ követ . Ebben az esetben hozzáadjuk exactaz Útvonal címkét. Ez azért van, mert a többi URL-ben is szerepel a "/" szó, tehát ha nem mondjuk el az alkalmazásnak, hogy csak keresni kell /, akkor betölti az elsőt, amely megfelel az útvonalnak, és elég trükkös hibát kapunk.

function App() { return (        ) } 

Most importálja az összetevőket az alkalmazásba. Érdemes különálló "components" mappába helyezni őket, hogy a kód tiszta és olvasható legyen.

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

Erre a korábban említett hibaüzenetre, amely betöltődik, ha a felhasználó helytelen URL-t ír be. Ez pontosan olyan, mint egy normál címke, de nincs útja. A Hiba komponens tartalmazza

Oops! Page not found!

. Ne felejtse el importálni az alkalmazásba.

function App() { return (         ) } 

Eddig webhelyünk csak az URL-ek beírásával navigálható. A webhelyre kattintható linkek hozzáadásához használjuk a LinkReact Router elemét, és beállítunk egy új Navbarösszetevőt. Még egyszer ne felejtsük el importálni az új komponenst az alkalmazásba.

Most adjon hozzá egy Linkelemet az alkalmazás minden egyes összetevőjéhez, és to="URL"kapcsolja össze őket.

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

Webhelyén most kattintható linkek találhatók, amelyek segítségével eligazodhat az egyoldalas alkalmazásban!

Következtetés

Tehát itt van. Ha könnyedén szeretne navigálni a React alkalmazásban, felejtse el a horgonycímkéket, és adja hozzá a React Router alkalmazást. Tiszta, rendezett és nagyon megkönnyíti az oldalak hozzáadását és törlését.

Ha többet szeretne megtudni a React Hookról és a React egyéb nagyszerű szolgáltatásairól, csatlakozhat a közelgő Advanced React tanfolyamom várólistájához.

Vagy ha valami kezdőbarátabbat keres, nézze meg a React bevezető tanfolyamomat.

Boldog kódolás;)