Kaip naudoti „React Router V6“: vadovas pradedančiajam

„React Router“ yra populiariausia biblioteka, kurią galite naudoti maršruto nustatymui „React“ programose. Jame pateikiamas komponentais pagrįstas požiūris į įvairias maršruto parinkimo užduotis, įskaitant puslapio naršymą, užklausos parametrus ir daug daugiau.

„React Router V6“ pateikia keletą reikšmingų maršruto parinkimo algoritmo pakeitimų, kad pašalintų ankstesnėje versijoje buvusias klaidas ir būtų pateiktas patobulintas maršruto parinkimo sprendimas.

Maršruto parinkimo naudojant „React Router V6“ pradžia

Pradėti, sukurti „React“ programą. Arba nustatykite React projektą naudodami Vite. Sukūrę projektą eikite į priekį ir įdiekite react-router-dom paketą.

npm install react-router-dom

Maršrutų kūrimas naudojant „React Router“.

Norėdami sukurti maršrutus, pradėkite visą programą apvyniodami a BrowserRouter komponentas. Atnaujinkite kodą savo index.jsx arba pagrindinis.jsx failą taip:

import React from'react'
import ReactDOM 





instagram viewer

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

Programos komponento apvyniojimas BrowserRouter komponentu užtikrina, kad visa programa gaus prieigą prie maršruto parinkimo konteksto ir funkcijų, kurias siūlo React Router biblioteka.

Maršrutų komponento naudojimas

Sujungę programą su BrowserRouter komponentu, galite apibrėžti savo maršrutus.

The Maršrutai komponentas yra patobulinimas Perjungti komponentas, kurį anksčiau naudojo React Router v5. Šis komponentas palaiko santykinį maršrutą, automatinį maršrutų reitingavimą ir galimybę dirbti su įdėtais maršrutais.

Paprastai pridedate maršrutus aukščiausiame programos lygyje, dažnai programos komponente. Tačiau galite juos apibrėžti bet kurioje kitoje vietoje, atsižvelgiant į jūsų projekto struktūrą.

Atidaryk App.jsx failą ir pakeiskite atsako kodą tokiu:

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

Ši maršruto parinkimo konfigūracija susieja konkrečius URL kelius į atitinkamus puslapio komponentus (informacijos suvestinę ir Apie), užtikrinant, kad programa pateiktų atitinkamą komponentą, kai vartotojas apsilanko konkrečioje vietoje URL.

Atkreipkite dėmesį į elementas prop, komponente Maršrutas, kuris leidžia perduoti funkcinį komponentą, o ne tik komponento pavadinimą. Tai leidžia perduoti rekvizitus maršrutais ir su jais susijusius komponentus.

Viduje src katalogą, sukurkite naują puslapių katalogą ir pridėkite du naujus failus: Dashboard.jsx ir Apie.jsx. Eikite į priekį ir apibrėžkite funkcinius komponentus šiuose failuose, kad išbandytumėte maršrutus.

„createBrowserRouter“ naudojimas maršrutams apibrėžti

Reaguokite į maršrutizatoriaus dokumentus rekomenduoja naudoti sukurtiBrowserRouter komponentas, skirtas nustatyti „React“ žiniatinklio programų maršruto konfigūraciją. Šis komponentas yra lengva alternatyva BrowserRouter kurios argumentu yra daugybė maršrutų.

Naudojant šį komponentą, nereikia apibrėžti maršrutų programos komponente. Vietoj to galite apibūdinti visas savo maršruto konfigūracijas index.jsx arba pagrindinis.jsx failą.

Štai pavyzdys, kaip galite naudoti šį komponentą:

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

Maršruto konfigūracija naudoja sukurtiBrowserRouter ir RouterProvider komponentus, kad sukurtumėte „React“ programos maršruto sistemą.

Tačiau vienintelis šio diegimo skirtumas yra tas, kad užuot apvyniojusi programą naudodama BrowserRouter komponentą, ji naudoja RouterProvider komponentas perduoti Maršrutizatorius visų programos komponentų kontekste.

Puslapio nerasta maršrutų įgyvendinimas

The kelias „Route“ komponento propas palygina pateiktą kelią su dabartiniu URL, kad nustatytų, ar yra atitiktis, prieš pateikiant reikiamą komponentą.

Norėdami tvarkyti atvejus, kai nesutampa maršrutai, galite sukurti konkretų maršrutą, kuris bus tvarkomas 404 puslapis nerasta klaidų. Įtraukus šį maršrutą, vartotojai gali gauti prasmingus atsakymus situacijose, kai jie pasiekia neegzistuojantį URL.

Norėdami įdiegti 404 maršrutą, įtraukite šį maršrutą į maršrutų komponentą:

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

Tada sukurkite tinkintą NotFound.jsx komponentas ir galiausiai, stilizuokite komponentą naudodami CSS modulius.

Žvaigždutė (*) yra pakaitos simbolis, apdorojantis scenarijus, kai nė vienas iš nurodytų maršrutų neatitinka dabartinio URL.

Programinė navigacija naudojant „useNavigate Hook“.

The naudotiNavigate „hook“ suteikia programinį būdą tvarkyti programų naršymą. Šis kabliukas ypač naudingas, kai norite suaktyvinti naršymą reaguodami į vartotojo sąveiką ar įvykius, pvz., mygtukų paspaudimus arba formų pateikimą.

Pažiūrėkime, kaip naudoti naudotiNavigate kabliukas programiniam naršymui. Darant prielaidą, kad sukūrėte Apie.jsx funkcinis komponentas, importuokite kabliuką iš „React Router“ paketo:

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

Tada pridėkite mygtuką, kurį paspaudus suaktyvinama navigacija į nurodytą maršrutą.

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

 </>
 );
}
exportdefault About;

Verta paminėti, kad „useNavigate hook“ ir „useNavigation hook“, pristatyti „React Router v6“, atlieka skirtingus tikslus, nepaisant glaudžiai susijusių pavadinimų.

Naudodami „useNavigation“ kabliuką galite pasiekti su navigacija susijusią informaciją, pvz., vykdomos navigacijos būseną ir kitą specifiką. Tai naudinga, kai norite pateikti vartotojo sąsajos elementus, pvz., įkelti suktukus, kad pateiktumėte vaizdinį grįžtamąjį ryšį apie vykstančius procesus.

Štai pavyzdys, kaip galite naudoti „useNavigation Hook“.

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

Šiame pavyzdyje Pateikimo mygtukas komponentas dinamiškai atnaujins savo tekstą pagal naršymo būseną, gautą naudojant „useNavigation Hook“.

Nors šie kabliukai atlieka skirtingus vaidmenis, vis tiek galite juos naudoti kartu. Naudokite „Navigate Hook“, kad pradėtumėte naršymo procesą, ir „ useNavigation Hook“, kad gautumėte informaciją apie naršymą realiuoju laiku, o tai nukreipia grįžtamojo ryšio vartotojo sąsają, kurią reikia pateikti naršyklėje.

Naudojant useRoutes Hook

Šis kabliukas leidžia apibrėžti maršruto kelius kartu su atitinkamais objekto komponentais. Vėliau kabliukas naudojamas maršrutams suderinti ir atitinkamiems komponentams rodyti.

Štai paprastas kabliuko naudojimo pavyzdys:

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;

Šiame pavyzdyje maršrutai objektas apibrėžia URL kelių susiejimą su komponentais. The Programėlė Tada komponentas naudoja šį kabliuką, kad atitiktų dabartinį URL ir pateiktų atitinkamą komponentą pagal suderintą maršrutą.

Naudodami šį kabliuką galite tiksliai valdyti maršruto logiką ir lengvai sukurti pritaikytą maršruto valdymo logiką jūsų programai.

Maršruto tvarkymas „React“ programose

Nors pačiame „React“ nėra iš anksto sukurto maršruto parinkimo užduočių tvarkymo mechanizmo, „React Router“ užpildo šią spragą. Jame pateikiami įvairūs maršruto parinkimo komponentai ir paslaugų funkcijos, kurias galite lengvai naudoti kurdami interaktyvias, patogias programas.