Uneori mai aveți la dispoziție doar 5 minute. În loc să-l irosim pe rețelele de socializare, să primim o introducere de 5 minute la React-Router! În acest tutorial, vom învăța elementele de bază ale rutei în React prin construirea navigării pentru un site web al magazinului de tricotaje Scrimba. Nu este real, dar poate într-o zi …;)

Dacă doriți o introducere corectă a acestui subiect, vă puteți alătura listei de așteptare pentru viitoare curs React avansat, sau dacă sunteți încă un începător, verificați-mi curs introductiv despre React.

Ce este oricum React-Router?

Multe site-uri web moderne sunt de fapt alcătuite dintr-o singură pagină, ele arată doar ca mai multe pagini, deoarece conțin componente care se redau ca pagini separate. Acestea sunt denumite de obicei SPA-uri – sfoc-pvârstă Aaplicații. În esență, ceea ce face React Router este să redea condiționat anumite componente pentru a fi afișate în funcție de traseu fiind folosit în URL (/ pentru pagina de pornire, /about pentru pagina despre, etc.).

De exemplu, putem folosi React Router pentru a ne conecta www.knit-with-scrimba.com/ la www.knit-with-scrimba.com/about sau www.knit-with-scrimba.com/shop

Sună grozav – cum îl folosesc?

Pentru a utiliza React Router, trebuie mai întâi să-l instalați utilizând NPM:

ad-banner
npm install react-router-dom

Alternativ, puteți utiliza doar acest loc de joacă din Scrimba, care are codul completat deja scris.

Va trebui să importați BrowserRouter, Route și Switch from react-router-dom pachet:

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

În exemplul meu, leg pagina de destinație cu alte două „pagini” (care sunt de fapt doar componente) numite Shop și About.

Mai întâi, va trebui să configurați aplicația pentru a funcționa cu React Router. Tot ceea ce va fi redat va trebui să intre în <BrowserRouter> element, așa că înfășurați-vă prima aplicație. Componenta care face toată logica afișării diferitelor componente pe care le oferiți.

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

Apoi, în componenta aplicației, adăugați Switch element (deschiderea și închiderea etichetelor). Acestea asigură că numai o componentă este redată odată. Dacă nu folosim acest lucru, putem alege implicit Error componentă, pe care o vom scrie mai târziu.

function App() {
    return (
        <main>
            <Switch>
                
            </Switch>
        </main>
    )
}

Este timpul să vă adăugați <Route> Etichete. Acestea sunt legăturile dintre componente și trebuie plasate în interiorul <Switch> Etichete.

Pentru a spune <Route> tag-uri ce componentă să se încarce, pur și simplu adăugați un path atributul și numele componentei cu care doriți să încărcați component atribut.

<Route path="/" component={Home} />

Multe adrese URL ale paginii de pornire sunt numele site-ului urmat de "/", de exemplu, www.knit-with-scrimba.com/. În acest caz, adăugăm exact la eticheta Route. Acest lucru se datorează faptului că și celelalte adrese URL conțin „/”, deci dacă nu spunem aplicației că trebuie să caute doar /, îl încarcă pe primul care se potrivește cu traseul și avem un bug destul de dificil de rezolvat.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

Acum importați componentele în aplicație. Poate doriți să le aveți într-un folder separat „componente” pentru a menține codul curat și lizibil.

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

Pe acel mesaj de eroare menționat anterior, care se încarcă dacă un utilizator introduce o adresă URL incorectă. Este la fel ca un normal <Route> etichetă, dar fără cale. Componenta Eroare conține <h1>Oops! Page not found!</h1>. Nu uitați să îl importați în aplicație.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

Până în prezent, site-ul nostru este navigabil numai prin introducerea adreselor URL. Pentru a adăuga linkuri care pot fi făcute clic pe site, folosim Link element de la React Router și configurați un nou Navbar componentă. Încă o dată, nu uitați să importați noua componentă în aplicație.

Acum adăugați un Link pentru fiecare componentă din aplicație și utilizare to="URL" pentru a le lega.

function Navbar() {
  return (
    <div>
      <Link to="/">Home </Link>
      <Link to="/about">About Us </Link>
      <Link to="/shop">Shop Now </Link>
    </div>
  );
};

Site-ul dvs. are acum linkuri care pot fi făcute clic, care vă pot naviga în jurul aplicației dvs. de o singură pagină!

Concluzie

Deci, acolo îl avem. Dacă doriți să navigați cu ușurință în jurul unei aplicații React, uitați de etichetele de ancorare și adăugați React Router. Este curat, este organizat și facilitează adăugarea și ștergerea paginilor.

Pentru a afla mai multe despre React Hooks și alte caracteristici extraordinare ale React, vă puteți alătura listei de așteptare pentru my viitoare curs React avansat.

Sau dacă sunteți în căutarea pentru ceva mai prietenos pentru începători, puteți să-l verificați pe curs introductiv despre React.

Codificare fericită;)