Ako používať React Router V6: Príručka pre začiatočníkov

React Router je najobľúbenejšia knižnica, ktorú môžete použiť na implementáciu smerovania v aplikáciách React. Poskytuje prístup založený na komponentoch na spracovanie rôznych úloh smerovania vrátane navigácie po stránkach, parametrov dotazu a mnohých ďalších.

React Router V6 zavádza niektoré významné zmeny v smerovacom algoritme, aby riešil úskalia, ktoré boli prítomné v jeho predchádzajúcej verzii, a poskytuje vylepšené smerovacie riešenie.

Začíname so smerovaním pomocou React Router V6

Začať, vytvorte aplikáciu React. prípadne nastaviť projekt React pomocou Vite. Po vytvorení projektu pokračujte a nainštalujte reagovať-smerovač-dom balík.

npm install react-router-dom

Vytváranie trás pomocou React Router

Ak chcete vytvoriť trasy, začnite obalením celej aplikácie pomocou a BrowserRouter komponent. Aktualizujte kód vo svojom index.jsx alebo main.jsx súbor takto:

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

Zabalenie komponentu App do komponentu BrowserRouter zaisťuje, že celá aplikácia získa prístup ku kontextu smerovania a funkciám, ktoré ponúka knižnica React Router.

Používanie komponentu Routes

Keď aplikáciu zabalíte do komponentu BrowserRouter, môžete definovať svoje trasy.

The Trasy komponentom je vylepšenie Prepínač komponent, ktorý predtým používal React Router v5. Tento komponent podporuje relatívne smerovanie, automatickú klasifikáciu ciest a schopnosť pracovať s vnorenými cestami.

Trasy zvyčajne pridávate na najvyššej úrovni vašej aplikácie, často v rámci komponentu App. Môžete ich však definovať na akomkoľvek inom mieste v závislosti od štruktúry vášho projektu.

Otvor App.jsx súbor a nahraďte štandardný kód Reagujte takto:

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

Táto konfigurácia smerovania mapuje konkrétne cesty URL k príslušným komponentom stránky (Dashboard and About), aby sa zabezpečilo, že aplikácia vykreslí príslušný komponent, keď používateľ navštívi konkrétny URL.

Všimnite si element prop, v rámci komponentu Route, ktorý vám umožňuje odovzdať funkčný komponent namiesto samotného názvu komponentu. To umožňuje prejsť rekvizitami po trasách a ich pridružených komponentoch.

V src adresár, vytvorte nový stránky adresár a pridajte dva nové súbory: Dashboard.jsx a About.jsx. Pokračujte a definujte funkčné komponenty v rámci týchto súborov na testovanie trás.

Použitie createBrowserRouter na definovanie trás

Reagujte na dokumentáciu smerovača odporúča použiť createBrowserRouter komponent na definovanie konfigurácie smerovania pre webové aplikácie React. Tento komponent je odľahčenou alternatívou k BrowserRouter ktorý berie ako argument celý rad ciest.

Pri použití tohto komponentu nie je potrebné definovať vaše trasy v rámci komponentu App. Namiesto toho môžete načrtnúť všetky svoje konfigurácie trasy v rámci index.jsx alebo main.jsx súbor.

Tu je príklad, ako môžete použiť tento 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>
);

Konfigurácia smerovania používa createBrowserRouter a Poskytovateľ smerovača komponenty na vytvorenie smerovacieho systému pre aplikáciu React.

Jediný rozdiel oproti tejto implementácii je však v tom, že namiesto zabalenia aplikácie pomocou komponentu BrowserRouter používa Poskytovateľ smerovača komponent prejsť Router ku všetkým komponentom v aplikácii.

Implementácia trás, pri ktorých sa stránka nenašla

The cesta prop v komponente Route porovná poskytnutú cestu s aktuálnou URL, aby určil, či existuje zhoda pred vykreslením požadovaného komponentu.

Na zvládnutie prípadov, keď sa nezhodujú žiadne trasy, môžete vytvoriť špecifickú trasu, ktorá bude spravovaná Chyby na stránke 404 sa nenašli. Zahrnutie tejto trasy zaisťuje, že používatelia môžu dostávať zmysluplné odpovede v situáciách, keď pristúpili na neexistujúcu adresu URL.

Ak chcete implementovať trasu 404, pridajte túto trasu do komponentu Routes:

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

Potom vytvorte vlastný NotFound.jsx komponent a nakoniec, štýl komponentu pomocou modulov CSS.

Hviezdička (*) je zástupný znak, ktorý spracováva scenáre, kde žiadna zo zadaných trás nezodpovedá aktuálnej adrese URL.

Programová navigácia pomocou háku useNavigate

The použiteNavigovať hák poskytuje programový spôsob ovládania navigácie v aplikáciách. Tento háčik je obzvlášť užitočný, keď chcete spustiť navigáciu v reakcii na interakcie používateľa alebo udalosti, ako sú kliknutia na tlačidlo alebo odoslanie formulárov.

Poďme sa pozrieť na to, ako použiť použiteNavigovať háčik pre programovú navigáciu. Za predpokladu, že ste vytvorili About.jsx funkčný komponent, importujte háčik z balíka React Router:

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

Potom pridajte tlačidlo, ktoré po kliknutí spustí navigáciu na zadanú trasu.

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

 </>
 );
}
exportdefault About;

Stojí za zmienku, že háčik useNavigate a háčik useNavigation, zavedené v React Router v6, slúžia na odlišné účely napriek ich úzko súvisiacim názvom.

Hák useNavigation vám umožňuje prístup k podrobnostiam súvisiacim s navigáciou, ako je stav prebiehajúcej navigácie a ďalšie špecifiká. Je to užitočné, keď chcete vykresliť prvky používateľského rozhrania, ako sú napríklad číselníky načítania, aby ste poskytli vizuálnu spätnú väzbu o prebiehajúcich procesoch.

Tu je príklad, ako môžete využiť háčik 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>;
}

V tomto príklade SubmitButton komponent bude dynamicky aktualizovať svoj text na základe stavu navigácie získaného z háku useNavigation.

Aj keď majú tieto háčiky rôzne úlohy, stále ich môžete používať spolu. Hák useNavigate na spustenie procesu navigácie a háčik useNavigation na získanie podrobností o navigácii v reálnom čase, ktoré potom vedú k vykresleniu používateľského rozhrania spätnej väzby v prehliadači.

Používanie háku userRoutes

Tento háčik vám umožňuje definovať cesty trasy popri ich zodpovedajúcich komponentoch v rámci objektu. Následne sa háčik použije na spárovanie trás a zobrazenie príslušných komponentov.

Tu je jednoduchý príklad použitia háku:

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;

V tomto príklade trasy objekt definuje mapovanie URL ciest na komponenty. The App komponent potom použije tento háčik na priradenie aktuálnej adresy URL a vykreslenie príslušného komponentu na základe zhodnej trasy.

Použitie tohto háku vám poskytuje podrobnú kontrolu nad vašou logikou smerovania a umožňuje vám jednoducho vytvoriť vlastnú logiku spracovania trasy pre vašu aplikáciu.

Spracovanie smerovania v aplikáciách React

Hoci samotný React neobsahuje vopred vytvorený mechanizmus na spracovanie úloh smerovania, React Router túto medzeru vypĺňa. Poskytuje rôzne smerovacie komponenty a pomocné funkcie, ktoré môžete ľahko použiť na vytváranie interaktívnych, užívateľsky príjemných aplikácií.