Kā lietot React Router V6: rokasgrāmata iesācējiem

React Router ir vispopulārākā bibliotēka, ko varat izmantot maršrutēšanas ieviešanai React lietojumprogrammās. Tā nodrošina uz komponentiem balstītu pieeju dažādu maršrutēšanas uzdevumu apstrādei, tostarp lapas navigācijai, vaicājuma parametriem un daudz ko citu.

React Router V6 ievieš dažas būtiskas izmaiņas maršrutēšanas algoritmā, lai novērstu nepilnības, kas bija tās iepriekšējā versijā, un nodrošinātu uzlabotu maršrutēšanas risinājumu.

Darba sākšana ar maršrutēšanu, izmantojot React Router V6

Lai sāktu, izveidot React lietojumprogrammu. Alternatīvi, iestatiet React projektu, izmantojot Vite. Pēc projekta izveides turpiniet un instalējiet reaģēt-router-dom iepakojums.

npm install react-router-dom

Maršrutu izveide, izmantojot React Router

Lai izveidotu maršrutus, sāciet, aptinot visu lietojumprogrammu ar a BrowserRouter komponents. Atjauniniet kodu savā index.jsx vai galvenais.jsx failu šādi:

import React from'react'





instagram viewer


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

Lietojumprogrammas komponenta iesaiņošana ar BrowserRouter komponentu nodrošina, ka visa lietojumprogramma iegūst piekļuvi maršrutēšanas kontekstam un funkcijām, ko piedāvā React Router bibliotēka.

Izmantojot komponentu Routes

Kad esat iesaiņojis lietojumprogrammu ar BrowserRouter komponentu, varat definēt savus maršrutus.

The Maršruti komponents ir uzlabojums Slēdzis komponents, ko iepriekš izmantoja React Router v5. Šis komponents atbalsta relatīvo maršrutēšanu, automātisko maršrutu ranžēšanu un iespēju strādāt ar ligzdotiem maršrutiem.

Parasti maršrutus pievienojat lietojumprogrammas augstākajā līmenī, bieži vien programmas komponentā. Tomēr jūs varat tos definēt jebkurā citā vietā atkarībā no jūsu projekta struktūras.

Atveriet App.jsx failu un aizstājiet reakcijas kodu ar šādu:

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

Šī maršrutēšanas konfigurācija kartē konkrētus URL ceļus uz atbilstošajiem lapas komponentiem (informācijas panelis un Par), nodrošinot, ka lietotne atveido atbilstošo komponentu, kad lietotājs apmeklē konkrētu URL.

Ievērojiet, elements prop, komponentā Route, kas ļauj nodot funkcionālu komponentu, nevis tikai komponenta nosaukumu. Tas ļauj virzīt rekvizītus pa maršrutiem un ar tiem saistītos komponentus.

Iekš src direktorijā, izveidojiet jaunu lapas direktorijā un pievienojiet divus jaunus failus: Dashboard.jsx un About.jsx. Dodieties uz priekšu un definējiet šajos failos funkcionālos komponentus, lai pārbaudītu maršrutus.

CreateBrowserRouter izmantošana, lai definētu maršrutus

Reaģējiet uz maršrutētāja dokumentāciju iesaka izmantot izveidotBrowserRouter komponents, lai definētu React tīmekļa lietojumprogrammu maršrutēšanas konfigurāciju. Šis komponents ir viegla alternatīva BrowserRouter kas par argumentu izmanto vairākus maršrutus.

Izmantojot šo komponentu, lietotnes komponentā nav jādefinē maršruti. Tā vietā varat ieskicēt visas savas maršruta konfigurācijas index.jsx vai galvenais.jsx failu.

Šeit ir piemērs, kā varat izmantot šo komponentu:

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šrutēšanas konfigurācija izmanto izveidotBrowserRouter un RouterProvider komponenti, lai izveidotu maršrutēšanas sistēmu React lietojumprogrammai.

Tomēr vienīgā atšķirība no šīs ieviešanas ir tā, ka tā vietā, lai iesaiņotu lietojumprogrammu, izmantojot BrowserRouter komponentu, tā izmanto RouterProvider komponents, lai izietu Maršrutētājs kontekstā ar visiem lietojumprogrammas komponentiem.

Lapa-neatrasta maršrutu ieviešana

The ceļš prop komponentā Route salīdzina norādīto ceļu ar pašreizējo URL, lai pirms vajadzīgā komponenta renderēšanas noteiktu, vai ir atbilstība.

Lai apstrādātu gadījumus, kad neatbilst neviens maršruts, varat izveidot konkrētu maršrutu, kas tiks pārvaldīts 404 lapa nav atrasta kļūdas. Šī maršruta iekļaušana nodrošina, ka lietotāji var saņemt jēgpilnas atbildes situācijās, kad viņi ir piekļuvuši neeksistējošam URL.

Lai ieviestu 404. maršrutu, pievienojiet šo maršrutu komponentā Maršruti:

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

Pēc tam izveidojiet pielāgotu NotFound.jsx komponents un visbeidzot, veidojiet komponentu, izmantojot CSS moduļus.

Zvaigznīte (*) ir aizstājējzīme, kas apstrādā scenārijus, kad neviens no norādītajiem maršrutiem neatbilst pašreizējam URL.

Programmatiskā navigācija, izmantojot useNavigate Hook

The useNavigate hook nodrošina programmatisku veidu, kā rīkoties ar navigāciju lietojumprogrammās. Šis āķis ir īpaši noderīgs, ja vēlaties aktivizēt navigāciju, reaģējot uz lietotāja mijiedarbību vai notikumiem, piemēram, pogu klikšķiem vai veidlapu iesniegšanu.

Apskatīsim, kā lietot useNavigate āķis programmatiskajai navigācijai. Pieņemot, ka esat izveidojis About.jsx funkcionālo komponentu, importējiet āķi no React Router pakotnes:

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

Pēc tam pievienojiet pogu, kas, noklikšķinot, aktivizē navigāciju uz noteiktu maršrutu.

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

 </>
 );
}
exportdefault About;

Ir vērts pieminēt, ka UseNavigate hook un useNavigation hook, kas ieviesti React Router v6, kalpo atšķirīgiem mērķiem, neskatoties uz to cieši saistītajiem nosaukumiem.

UseNavigation āķis ļauj piekļūt informācijai, kas saistīta ar navigāciju, piemēram, notiekošajam navigācijas stāvoklim un citai specifikai. Tas ir noderīgi, ja vēlaties renderēt lietotāja interfeisa elementus, piemēram, ielādēt spinnerus, lai sniegtu vizuālu atgriezenisko saiti par notiekošajiem procesiem.

Šeit ir piemērs, kā izmantot useNavigation āķi.

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

Šajā piemērā Iesniegšanas poga komponents dinamiski atjauninās savu tekstu, pamatojoties uz navigācijas stāvokli, kas iegūts no useNavigation āķa.

Lai gan šiem āķiem ir dažādas lomas, jūs joprojām varat tos izmantot kopā. UseNavigate āķis, lai sāktu navigācijas procesu, un useNavigation āķis, lai izgūtu reāllaika navigācijas informāciju, kas pēc tam palīdz pārlūkprogrammā renderēt atsauksmes UI.

Izmantojot useRoutes Hook

Šis āķis ļauj definēt maršruta ceļus līdzās to atbilstošajiem komponentiem objektā. Pēc tam āķis tiek izmantots, lai saskaņotu maršrutus un parādītu atbilstošās sastāvdaļas.

Šeit ir vienkāršs āķa izmantošanas piemērs:

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;

Šajā piemērā maršrutos objekts nosaka URL ceļu kartēšanu komponentiem. The App komponents pēc tam izmanto šo āķi, lai saskaņotu pašreizējo URL un renderētu atbilstošo komponentu, pamatojoties uz atbilstošo maršrutu.

Izmantojot šo āķi, jūs varat precīzi kontrolēt maršrutēšanas loģiku un viegli izveidot pielāgotu maršruta apstrādes loģiku savai lietojumprogrammai.

Maršrutēšanas apstrāde React lietojumprogrammās

Lai gan pati React neietver iepriekš izveidotu mehānismu maršrutēšanas uzdevumu apstrādei, React Router aizpilda šo trūkumu. Tas nodrošina dažādus maršrutēšanas komponentus un utilītu funkcijas, kuras varat viegli izmantot, lai izveidotu interaktīvas, lietotājam draudzīgas lietojumprogrammas.