React Router V6 kasutamine: juhend algajatele

React Router on kõige populaarsem teek, mida saate kasutada marsruutimise rakendamiseks Reacti rakendustes. See pakub komponendipõhist lähenemist mitmesuguste marsruutimisülesannete käsitlemiseks, sealhulgas lehel navigeerimine, päringuparameetrid ja palju muud.

React Router V6 toob marsruutimisalgoritmi sisse mõned olulised muudatused, et lahendada varasemas versioonis esinenud lõkse ja pakkuda täiustatud marsruutimislahendust.

Marsruutimise alustamine Reacti ruuteri V6 abil

Alustamiseks looge rakendus React. Teise võimalusena seadistage Vite abil Reacti projekt. Pärast projekti loomist jätkake ja installige reageerida-ruuter-dom pakett.

npm install react-router-dom

Marsruutide loomine Reacti ruuteri abil

Marsruutide loomiseks alustage kogu rakenduse mähkimisest tähega a BrowserRouter komponent. Värskendage oma koodi index.jsx või main.jsx faili järgmiselt:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';





instagram viewer
ReactDOM.createRoot(document.getElementById('root')).render(



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

Rakenduse komponendi mähkimine komponendiga BrowserRouter tagab, et kogu rakendus saab juurdepääsu marsruutimise kontekstile ja funktsioonidele, mida pakub teegi React Router.

Marsruutide komponendi kasutamine

Kui olete rakenduse BrowserRouter komponendiga ümbritsenud, saate määrata oma marsruudid.

The Marsruudid komponent on täiustus Lüliti komponent, mida varem kasutas React Router v5. See komponent toetab suhtelist marsruutimist, automaatset marsruudi järjestamist ja võimalust töötada pesastatud marsruutidega.

Tavaliselt lisate marsruute oma rakenduse kõrgeimal tasemel, sageli rakenduse komponendi sees. Sõltuvalt teie projekti struktuurist saate need siiski määratleda mis tahes muus kohas.

Ava App.jsx faili ja asendage reageerimiskood järgmisega:

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

See marsruutimise konfiguratsioon kaardistab konkreetsed URL-i teed vastavatele lehekomponentidele (juhtpaneel ja Teave), tagades, et rakendus renderdab vastava komponendi, kui kasutaja mõnda konkreetset külastab URL.

Pange tähele element prop, mis võimaldab teil edastada funktsionaalset komponenti, mitte ainult komponendi nime. See võimaldab suunata rekvisiite mööda marsruute ja nendega seotud komponente.

Aastal src kataloog, looge uus lehekülgi kataloogi ja lisage kaks uut faili: Dashboard.jsx ja About.jsx. Jätkake ja määrake nendes failides funktsionaalsed komponendid, et marsruute testida.

CreateBrowserRouteri kasutamine marsruutide määratlemiseks

Reageerige ruuteri dokumentatsioonile soovitab kasutada looBrowserRouter komponent Reacti veebirakenduste marsruutimise konfiguratsiooni määratlemiseks. See komponent on kerge alternatiiv BrowserRouter mille argumendiks on rida marsruute.

Seda komponenti kasutades pole vaja rakenduse komponendis marsruute määratleda. Selle asemel saate kuvada kõik oma marsruudi konfiguratsioonid index.jsx või main.jsx faili.

Siin on näide selle komponendi kasutamise kohta:

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>
);

Marsruutimise konfiguratsioon kasutab looBrowserRouter ja RouterProvider komponendid, et luua Reacti rakenduse jaoks marsruutimissüsteem.

Ainus erinevus selle teostuse puhul on aga see, et selle asemel, et rakendust BrowserRouter komponendiga pakkida, kasutab see RouterProvider komponent läbida Ruuter kõigi rakenduse komponentide kontekstis.

Lehtede leidmata marsruutide rakendamine

The tee prop komponendis Marsruut võrdleb antud teed praeguse URL-iga, et teha kindlaks, kas enne nõutava komponendi renderdamist on vaste olemas.

Juhtude lahendamiseks, kui ükski marsruut ei sobi, saate luua konkreetse marsruudi, mida hallata 404 leheküljel ei leitud vigu. Selle marsruudi kaasamine tagab, et kasutajad saavad sisukaid vastuseid olukordades, kus nad on pääsenud juurde olematule URL-ile.

404 marsruudi rakendamiseks lisage see marsruut komponendisse Marsruudid:

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

Seejärel looge kohandatud NotFound.jsx komponent ja lõpuks komponendi stiil CSS-moodulite abil.

Tärn (*) on metamärk, mis käsitleb stsenaariume, kus ükski määratud marsruutidest ei vasta praegusele URL-ile.

Programmiline navigeerimine, kasutades useNavigate Hooki

The useNavigate konks pakub programmilist viisi rakendustes navigeerimise haldamiseks. See konks on eriti kasulik, kui soovite käivitada navigeerimise vastuseks kasutaja interaktsioonidele või sündmustele, nagu nuppude klõpsamine või vormide esitamine.

Vaatame, kuidas kasutada useNavigate konks programmiliseks navigeerimiseks. Eeldusel, et olete loonud About.jsx funktsionaalne komponent, importige konks paketist React Router:

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

Seejärel lisage nupp, millel klõpsamine käivitab navigeerimise määratud marsruudile.

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

 </>
 );
}
exportdefault About;

Tasub mainida, et React Router v6-s kasutusele võetud konks useNavigate ja useNavigation teenivad vaatamata nende tihedalt seotud nimedele erinevaid eesmärke.

Konks useNavigation võimaldab teil pääseda juurde navigeerimisega seotud üksikasjadele, nagu käimasoleva navigeerimise olek ja muud eripärad. See on kasulik, kui soovite renderdada kasutajaliidese elemente (nt ketrajate laadimine), et anda visuaalset tagasisidet käimasolevate protsesside kohta.

Siin on näide, kuidas kasutada useNavigation konksu.

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>;
}

Selles näites on Esita nupp komponent värskendab oma teksti dünaamiliselt, lähtudes useNavigationi konksust saadud navigeerimisolekust.

Kuigi neil konksudel on erinevad rollid, saate neid siiski koos kasutada. Navigeerimiskonks useNavigate navigeerimisprotsessi käivitamiseks ja Navigatsioonikonks reaalajas navigeerimise üksikasjade toomiseks, mis seejärel suunavad tagasiside kasutajaliidese, mida brauseris renderdada.

UseRoutes Hooki kasutamine

See konks võimaldab teil määratleda marsruudi teed koos nende vastavate komponentidega objekti sees. Seejärel kasutatakse konksu marsruutide sobitamiseks ja asjakohaste komponentide kuvamiseks.

Siin on lihtne näide konksu kasutamisest:

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;

Selles näites on marsruute objekt määratleb URL-i teede vastendamise komponentidele. The Rakendus Seejärel kasutab komponent seda konksu praeguse URL-i sobitamiseks ja sobiva komponendi renderdamiseks sobitatud marsruudi põhjal.

Selle konksu kasutamine annab teile täpse kontrolli oma marsruutimisloogika üle ja võimaldab teil hõlpsasti luua oma rakenduse jaoks kohandatud marsruudihaldusloogikat.

Marsruutimise käsitlemine Reacti rakendustes

Kuigi React ise ei sisalda marsruutimisülesannete haldamiseks ette ehitatud mehhanismi, täidab React Router selle tühimiku. See pakub erinevaid marsruutimise komponente ja utiliidi funktsioone, mida saate hõlpsalt kasutada interaktiivsete kasutajasõbralike rakenduste loomiseks.