Cum să utilizați React Router V6: un ghid pentru începători

React Router este cea mai populară bibliotecă pe care o puteți folosi pentru a implementa rutarea în aplicațiile React. Oferă o abordare bazată pe componente pentru gestionarea unei varietăți de sarcini de rutare, inclusiv navigarea în pagină, parametrii de interogare și multe altele.

React Router V6 introduce câteva modificări semnificative ale algoritmului de rutare, pentru a aborda capcanele prezente în versiunea sa anterioară și pentru a oferi o soluție de rutare îmbunătățită.

Noțiuni introductive cu rutarea utilizând React Router V6

Pentru a incepe, creați o aplicație React. Alternativ, configurați un proiect React folosind Vite. După crearea proiectului, continuați și instalați reacţionează-router-dom pachet.

npm install react-router-dom

Crearea rutelor folosind React Router

Pentru a crea rute, începeți prin a împacheta întreaga aplicație cu a BrowserRouter componentă. Actualizați codul din dvs index.jsx sau main.jsx fișier după cum urmează:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

Împachetarea componentei App cu componenta BrowserRouter asigură că întreaga aplicație are acces la contextul de rutare și la caracteristicile oferite de biblioteca React Router.

Utilizarea componentei Rute

După ce ați împachetat aplicația cu componenta BrowserRouter, vă puteți defini rutele.

The Trasee componenta este o îmbunătățire a Intrerupator componentă care a fost folosită anterior de React Router v5. Această componentă acceptă rutarea relativă, clasarea automată a rutelor și capacitatea de a lucra cu rute imbricate.

De obicei, veți adăuga rute la cel mai înalt nivel al aplicației dvs., adesea în cadrul componentei App. Cu toate acestea, le puteți defini în orice altă locație, în funcție de structura proiectului dumneavoastră.

Deschide App.jsx fișier și înlocuiți codul boilerplate React cu următoarele:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Această configurație de rutare mapează anumite căi URL către componentele corespunzătoare ale paginii (Tabloul de bord și Despre), asigurându-se că aplicația redă componenta corespunzătoare atunci când un utilizator vizitează o anumită URL.

Observați element prop, în cadrul componentei Route, care vă permite să treceți o componentă funcțională, spre deosebire de doar numele componentei. Acest lucru face posibilă trecerea elementelor de recuzită pe trasee și componentele asociate acestora.

În src director, creați un nou pagini director și adăugați două fișiere noi: Dashboard.jsx și Despre.jsx. Continuați și definiți componente funcționale în aceste fișiere pentru a testa rutele.

Utilizarea createBrowserRouter pentru a defini rutele

React documentația Router-ului recomandă utilizarea createBrowserRouter componentă pentru a defini configurația de rutare pentru aplicațiile web React. Această componentă este o alternativă ușoară la BrowserRouter care ia ca argument o serie de rute.

Folosind această componentă, nu este nevoie să vă definiți rutele în cadrul componentei App. În schimb, puteți sublinia toate configurațiile de traseu în cadrul index.jsx sau main.jsx fişier.

Iată un exemplu despre cum puteți utiliza această componentă:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

Configurația de rutare folosește createBrowserRouter și RouterProvider componente pentru a crea un sistem de rutare pentru o aplicație React.

Cu toate acestea, singura diferență cu această implementare este că, în loc să încapsuleze aplicația folosind componenta BrowserRouter, folosește RouterProvider componentă pentru a trece Router context pentru toate componentele din aplicație.

Implementarea rutelor Pagina negăsită

The cale prop din componenta Rută compară calea furnizată cu adresa URL curentă pentru a determina dacă există o potrivire înainte de a reda componenta necesară.

Pentru a gestiona cazurile în care nicio rută nu se potrivește, puteți crea o rută specifică care va gestiona 404 erori de pagină nu au fost găsite. Includerea acestei rute asigură utilizatorilor să primească răspunsuri semnificative în situațiile în care au accesat o adresă URL inexistentă.

Pentru a implementa o rută 404, adăugați această rută în componenta Rute:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

Apoi, creați un personalizat NotFound.jsx componenta si in final, stilați componenta folosind module CSS.

Asteriscul (*) este un caracter joker care se ocupă de scenarii în care niciuna dintre rutele specificate nu se potrivește cu adresa URL curentă.

Navigare programatică folosind useNavigate Hook

The utilizați Navigare hook oferă o modalitate programatică de a gestiona navigarea în aplicații. Acest cârlig este util în special atunci când doriți să declanșați navigarea ca răspuns la interacțiunile utilizatorului sau la evenimente, cum ar fi clicurile pe butoane sau trimiterile de formulare.

Să aruncăm o privire la modul de utilizare utilizați Navigare cârlig pentru navigare programatică. Presupunând că ați creat Despre.jsx componentă funcțională, importați cârligul din pachetul React Router:

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

Apoi adăugați un buton care, atunci când faceți clic, declanșează navigarea către o rută specificată.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

Merită menționat faptul că useNavigate hook și useNavigation hook, introduse în React Router v6, servesc unor scopuri distincte, în ciuda numelor lor strâns legate.

Utilizați cârligul de navigare vă permite să accesați detalii legate de navigare, cum ar fi starea de navigare în curs și alte detalii. Acest lucru este util atunci când doriți să redați elemente de UI, cum ar fi încărcarea spinnerelor, pentru a oferi feedback vizual despre procesele în desfășurare.

Iată un exemplu despre cum puteți utiliza cârligul useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

În acest exemplu, Buton de trimitere componenta își va actualiza în mod dinamic textul în funcție de starea de navigare obținută din cârligul useNavigation.

Chiar dacă aceste cârlige au roluri diferite, le puteți folosi în continuare împreună. Utilizați cârligul de navigare pentru a iniția procesul de navigare și utilizați cârligul de navigare pentru a prelua detaliile de navigare în timp real, care ghidează apoi tipul de interfață de utilizare de feedback care trebuie redate în browser.

Folosind cârligul useRoutes

Acest cârlig vă permite să definiți căile de traseu alături de componentele lor corespunzătoare într-un obiect. Ulterior, cârligul este folosit pentru a potrivi rutele și pentru a afișa componentele relevante.

Iată un exemplu simplu de utilizare a cârligului:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

În acest exemplu, trasee obiect definește maparea căilor URL la componente. The App componenta folosește apoi acest cârlig pentru a se potrivi cu adresa URL curentă și a reda componenta corespunzătoare pe baza rutei potrivite.

Utilizarea acestui cârlig vă oferă un control granular asupra logicii de rutare și vă permite să creați cu ușurință o logică personalizată de gestionare a rutei pentru aplicația dvs.

Gestionarea rutare în aplicațiile React

Deși React în sine nu include un mecanism pre-construit pentru gestionarea sarcinilor de rutare, React Router umple acest gol. Acesta oferă diverse componente de rutare și funcții utilitare pe care le puteți utiliza cu ușurință pentru a crea aplicații interactive, ușor de utilizat.