Un ghid pentru utilizarea react-router-dom

Pentru orice aplicație React non-trivială, trebuie să o împărțiți în mai multe pagini. Pentru a face acest lucru, devine necesar să implementați rutarea reacției.

Acesta poate fi un subiect intimidant la început. Cu toate acestea, acest tutorial vă va pune la curent cu toate elementele fundamentale necesare. În acest tutorial, vom construi o aplicație care utilizează rutarea.

Ce este React Routing (Rutarea pe partea client)

Rutarea React este o formă de rutare pe partea client implementată în aplicațiile React. Rutarea pe partea client este o alternativă la rutarea pe partea serverului. În rutarea pe server, browserul face o solicitare GET către serverul web ori de câte ori navigați la o altă pagină. Această solicitare poate dura câteva secunde înainte de a primi un răspuns.

Pentru o aplicație web în care vă deplasați constant între pagini, timpul de așteptare creează o experiență proastă pentru utilizator. Rutarea pe partea client este o alternativă la aceasta. În loc să ofere browserului HTML, aplicația folosește JavaScript pentru a genera HTML pentru diferite pagini.

Trebuie doar să furnizați un fișier index.html ca punct de intrare pentru ca aplicația dvs. să funcționeze. Acest punct de intrare încarcă apoi codul JavaScript. Pachetul JavaScript va reda pagini prin manipularea DOM, gestionarea rutare și implementarea funcționalității aplicației.

Deoarece serverul redă doar pagina index.html, aplicația se numește aplicație cu o singură pagină.

Avantajele rutării pe partea clientului

• Creează o experiență mai bună pentru utilizator, deoarece navigarea este mai rapidă, iar aplicația va fi mai receptivă. Cu rutarea pe server, fiecare navigare este o solicitare de rețea cu câteva secunde de latență.
• Permite crearea de aplicații offline, deoarece tot codul necesar pentru a rula aplicația poate fi stocat în cache local. Acest lucru vă permite să creați mai multe aplicații disponibile și să oferiți funcționalitate offline.
• Aplicația va folosi, de asemenea, mai puține date, deoarece cererile de rețea se reduc semnificativ dacă totul este trimis o singură dată și unele fișiere sunt stocate în cache local.
• De asemenea, reduce încărcarea serverului, deoarece serverul trebuie să redea aplicația o singură dată. Acest lucru contrastează cu randarea pe partea de server, în care serverul redă continuu aplicația.

În continuare, să discutăm cum să implementăm rutarea reacției.

Cum se implementează rutarea React

Pentru acest tutorial, vom construi o aplicație simplă pentru luarea de note. Acesta va fi format din mai multe pagini. Vom implementa rutarea pe partea client folosind React Router DOM pentru a permite clientului să navigheze între diferitele pagini. Nu vom construi totul pentru ca aplicația să funcționeze. În schimb, ne vom concentra pe rutare.

Cerințe preliminare

Pentru a urma acest tutorial, trebuie să înțelegeți HTML, JavaScript și React. De asemenea, va trebui să aveți instalate Node.js și NPM. Le puteți descărca și instala simultan instalând Nodejs din site-ul web. Sau urmați ghidul din videoclipul YouTube încorporat.

Ce Construim

Aplicația va avea mai multe pagini. Utilizând rutarea reactiei, veți putea naviga la diferite pagini. Modelele pentru pagini sunt prezentate mai jos.

Pagina de pornire este redată pe ruta „/”.

Pagina Despre este redată pe ruta „/about”.

Pagina Note la ruta „/note”.

Nouă pagină de note la ruta „/note/new”.

Puteți vedea fiecare notă în întregime pe Pagina Note. Această pagină este redată la ruta ‘/routes/‘, unde este un număr întreg care reprezintă id-ul notei pe care vrem să o citim.

Noțiuni de bază

Pentru a începe, creați un nou proiect React. Voi folosi Vite, așa că comanda de inițializare a unui nou proiect este următoarea:

npm create vite@latest scribbble --template react

Am specificat „scribbble” ca nume de proiect și React ca șablon. În continuare, voi deschide VS Code folosind comenzile de mai jos:

cd scribbble
code .

După ce VS Code este deschis, voi reveni la fereastra terminalului și voi instala react-router-dom. Acest pachet facilitează implementarea reacției de rutare în aplicațiile dvs.

npm install react-router-dom

Vom crea un fișier în care vor fi stocate notele noastre. Creați un fișier src/notes.js și adăugați următorul cod:

const notes = [
  {
    id: 1,
    title: "Note 1",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    id: 2,
    title: "Note 2",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    id: 3,
    title: "Note 3",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
];

export default notes;

Apoi, ștergeți fișierul src/App.css. Nu îl vom folosi în acest proiect. De asemenea, asigurați-vă că eliminați importul pentru fișierul App.css din fișierul App.jsx.

După aceea, înlocuiți totul din fișierul index.css cu acesta:

:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#404040}*{margin:0;padding:0}.nav-container{display:flex;justify-content:space-between;padding:15px 30px}.home-buttons,.nav{display:flex;gap:10px}a{text-decoration:none;color:inherit;font-weight:600}h1{font-size:63px;margin:20px 0}input,textarea{border:1px solid #f1f1f1;background-color:#fafafa;outline:0;padding:10px;width:100%}textarea{resize:none;font-family:inherit}.container{padding:15px}.primary{background-color:#8a2be2;color:#fff}.secondary{background-color:#eee}.button{padding:15px 30px;font-size:16px;border:none;font-weight:700;border-radius:7px;cursor:pointer}.home-container{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-note-container{padding:20px}.new-note-form{display:flex;flex-direction:column;align-items:center;width:500px;gap:20px;margin:auto;border-radius:7px;padding:20px 30px}.notes-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:0 60px}.note{border:1px solid #d3d3d3;padding:15px;border-radius:7px}.note h2{font-size:1rem;margin-bottom:10px}.note p{color:#585858;font-size:.9rem;cursor:pointer}.note-container{display:flex;align-items:center;justify-content:center;padding:50px}.note-content{width:500px}

Apoi, creați următoarele fișiere pentru paginile pe care le vom crea:

• src/pages/Home.jsx
• src/pages/About.jsx
• src/pages/Note.jsx
• src/pages/NewNote.jsx
• src/pages/Notes.jsx

Apoi, creați fișierul pentru componenta Bară de navigare. Acest fișier va fi localizat la src/components/NavBar.jsx

Configurarea rutare React

Cu aplicația noastră configurată, vom configura în continuare rutarea în aplicația noastră.

Deschideți fișierul App.jsx și ștergeți totul din interior. Apoi, adăugați următoarele importuri în partea de sus a fișierului:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavBar } from "./components/NavBar";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Notes } from "./pages/Notes";
import { Note } from "./pages/Note";
import { NewNote } from "./pages/NewNote";

Importăm componentele BrowserRouter, Routes și Routes din react-router-dom. Acestea vor fi folosite pentru a configura un router. Apoi, am importat NavBar din directorul nostru de componente și mai multe pagini din fișierele paginilor noastre. Nu am implementat încă paginile, dar o vom face în curând.

În continuare, vom configura componenta noastră de aplicație:

export default App () {

}

Apoi, adăugăm următorul marcaj în declarația noastră de returnare:

return (
    <BrowserRouter>
      
    </BrowserRouter>
)

Aceasta redă BrowserRouter, o componentă React furnizată de componenta react-router-dom. Această componentă configurează un router care funcționează în browser. Aplicația noastră va fi conținută în acele etichete.

Apoi, vom adăuga bara de navigare și vom crea o componentă Rute.

return (
    <BrowserRouter>
      <NavBar />
      <div className="container">
        <Routes>
          
        </Routes>
      </div>
    </BrowserRouter>
  );

În interiorul elementului BrowserRouter, am adăugat un NavBar. Vom defini acest element mai târziu, dar creează legăturile în partea de sus a fiecărei pagini. În loc să-l scriem separat pentru fiecare pagină, vom crea un NavBar.

Apoi, am creat un element container. Acest element nu este necesar pentru rutare. Tocmai l-am adăugat pentru a aplica stilul.

În interiorul containerului, am adăugat componenta Rute. Aici vor fi redate diferite pagini în funcție de ruta pe care se află browserul. Tot ce se află în interiorul componentei Rute va fi redat din nou de fiecare dată când traseul se schimbă.

În sfârșit, adăugăm rutele pentru diferitele pagini.

  return (
    <BrowserRouter>
      <NavBar />
      <div className="container">
        <Routes>
          <Route path="/" Component={Home} />
          <Route path="about" Component={About} />
          <Route path="notes" Component={Notes}>
            <Route path="new" Component={NewNote} />
            <Route path=":id" Component={Note} />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );

Componenta Acasă va fi redată când calea este „/”, iar componenta Despre va fi redată pe ruta „/about”. Componenta Note va fi redată pe ruta „/note”. Avem, de asemenea, ruta „/notes/new” și „/notes/:id” definite ca rute imbricate.

Rutele imbricate explicate

Un traseu poate conține rute interioare. Acestea se numesc rute imbricate. Calea către aceste rute imbricate va fi unită cu ruta părinte pentru a forma calea completă. De exemplu, rutele „note” și „noi” vor fi combinate cu „/note/nou”.

În ceea ce privește modul în care componentele sunt randate atunci când utilizatorul navighează la ruta părinte, va fi randată doar componenta părinte. Cu toate acestea, componentele părinte și imbricate vor fi randate împreună atunci când navighează pe ruta imbricată.

Pentru a reda ambele componente împreună, componenta Notes trebuie să redeze o componentă Outlet care specifică unde va fi încorporată componenta Note. Veți vedea acest lucru mai târziu când vom începe să creăm Paginile.

Trasee dinamice

Până acum, am specificat ruta literală pe care vrem să o potrivim. De exemplu, rutele „/” și „despre”. Cu toate acestea, react-router-dom ne permite să specificăm rute dinamice. O rută dinamică conține o porțiune care poate fi corelată cu un parametru de interogare. Când se potrivește, parametrul de interogare este transmis paginii.

De exemplu, în interiorul rutei părinte „posts”, avem o rută imbricată care conține o porțiune dinamică specificată de :id. Această rută acceptă orice text în loc de :id , iar acel text devine disponibil pentru componenta Note ca id.

Construirea barei de navigare

Folosim componente Link în loc de etichete de ancorare normale pentru a naviga folosind react-router-dom. Prin urmare, bara noastră de navigare ar trebui să arate astfel:

import { Link } from "react-router-dom";

export function NavBar() {
  return (
    <div className="nav-container">
      <Link to="/">Scribbble</Link>
      <nav className="nav">
        <Link to="/about">About</Link>
        <Link to="/notes">Notes</Link>
        <Link to="/notes/new">New Note</Link>
      </nav>
    </div>
  );
}

Adăugați codul în src/pages/NavBar.jsx.

Construirea paginilor

În continuare, vom construi paginile. Pentru pagina de pornire, adăugați următorul cod la src/pages/Home.jsx.

import { useNavigate } from "react-router-dom";

export function Home() {
  const navigate = useNavigate();

  return (
    <div className="home-container">
      <h1>Notes for professionals</h1>
      <div className="home-buttons">
        <button
          onClick={() => {
            navigate("/notes/new");
          }}
          className="button primary"
        >
          Start Scribbling
        </button>
        <button
          onClick={() => {
            navigate("/notes");
          }}
          className="button secondary"
        >
          View Notes
        </button>
      </div>
    </div>
  );
}

În pagina de pornire, am dori să folosim butoane pentru a naviga. Ca rezultat, folosim cârligul useNavigate pentru a naviga în mod programatic. Am importat cârligul și apoi l-am numit în interiorul Home Component. Valoarea returnată după apelarea hook-ului este o funcție pe care o puteți folosi pentru a naviga.

În continuare, vom defini pagina Despre. Adăugați următorul cod în fișierul dvs. src/pages/About.jsx.

export function About() {
  return (
    <div>
      <h1>About</h1>
      <p>Simple Notes is the best note-taking application for professionals</p>
    </div>
  );
}

După aceasta, vom defini pagina Note.

În această componentă, trebuie să includem și o componentă Outlet care va fi folosită pentru a reda orice rute imbricate. Din acest motiv, pagina noastră src/pages/Notes.jsx va arăta astfel.

import { Outlet, useNavigate } from "react-router-dom";
import notes from "../notes";

export function Notes() {
  const navigate = useNavigate();
  return (
    <div>
      <Outlet />
      <div className="notes-list">
        {notes.map((note) => {
          return (
            <div
              className="note"
              key={note.id}
              onClick={() => {
                navigate("/notes/" + note.id);
              }}
            >
              <h2>{note.title}</h2>
              <p>{note.body.slice(0, 100)}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

În continuare, definim pagina Note.

Aceasta va fi redată pentru o notă individuală. Pentru a decide asupra unei note de randat, Notes va accesa id-ul specificat în porțiunea dinamică a traseului. Pentru a face acest lucru, folosim cârligul userParams. Prin urmare, acesta ar trebui să fie cod în interiorul fișierului src/pages/Note.jsx:

import { useParams } from "react-router-dom";
import notes from "../notes";

export function Note() {
  const params = useParams();
  const note = notes.find((note) => note.id == params.id);
  return (
    <div className="note-container">
      <div className="note-content">
        <h2>{note.title}</h2>
        <p>{note.body}</p>
      </div>
    </div>
  );
}

În cele din urmă, vom crea componenta NewNote în interiorul src/pages/NewNote.jsx folosind următorul cod:

export function NewNote() {
  return (
    <div class="new-note-container">
      <form class="new-note-form">
        <h2>New Note</h2>
        <input type="text" name="title" placeholder="Note title" />
        <textarea rows="10" placeholder="Note text" />
        <button class="button primary">Save Note</button>
      </form>
    </div>
  );
}

În acest moment, am scris tot codul aplicației. Puteți rula aplicația folosind npm run dev. Navigați la diferite pagini și vedeți cât de rapidă este rutarea client-sider.

Dezavantajele rutării pe partea clientului

În ciuda numeroaselor sale avantaje, rutarea pe partea client are mai multe dezavantaje. Acestea sunt explicate mai jos:

• Încărcarea inițială a paginii poate fi lentă, deoarece întreaga aplicație trebuie încărcată. Pachetul JavaScript poate fi foarte mare, necesitând timpi mari de încărcare.
• Deoarece JavaScript generează marcajul, pagina nu va fi optimizată pentru SEO.
• Deoarece totul se bazează pe JavaScript, browserele care nu acceptă JavaScript sau care au JavaScript dezactivat nu vor putea rula aplicația.

Concluzie

În acest articol, am acoperit rutarea reacției prin construirea unui proiect mic. Deși nu am acoperit totul, acest tutorial acoperă concepte pe care le vei folosi în majoritatea proiectelor la care vei lucra. Pentru mai multe informații despre react-router-dom, aici sunt documente oficiale.

Apoi, citiți acest articol despre bibliotecile de formulare React.