A React Router V6 használata: Útmutató kezdőknek

A React Router a legnépszerűbb könyvtár, amelyet az útválasztás megvalósítására használhat a React alkalmazásokban. Összetevő alapú megközelítést biztosít számos útválasztási feladat kezeléséhez, beleértve az oldalnavigációt, a lekérdezési paramétereket és még sok mást.

A React Router V6 néhány jelentős változtatást vezet be az útválasztási algoritmusba, hogy kiküszöbölje a korábbi verziójában előforduló buktatókat, és továbbfejlesztett útválasztási megoldást nyújtson.

Az útválasztás megkezdése a React Router V6 használatával

A kezdéshez hozzon létre egy React alkalmazást. Alternatív megoldásként állítson be egy React projektet a Vite segítségével. A projekt létrehozása után folytassa és telepítse a react-router-dom csomag.

npm install react-router-dom

Útvonalak létrehozása a React Router segítségével

Útvonalak létrehozásához kezdje a teljes alkalmazás becsomagolásával a BrowserRouter összetevő. Frissítse a kódot index.jsx vagy main.jsx fájl a következőképpen:

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

Az App komponens becsomagolása a BrowserRouter komponenssel biztosítja, hogy a teljes alkalmazás hozzáférjen a React Router könyvtár által kínált útválasztási környezethez és szolgáltatásokhoz.

Az Útvonalak komponens használata

Miután becsomagolta az alkalmazást a BrowserRouter komponenssel, meghatározhatja az útvonalakat.

A Útvonalak összetevő fejlesztése a Kapcsoló komponens, amelyet korábban a React Router v5 használt. Ez az összetevő támogatja a relatív útválasztást, az automatikus útvonal-rangsorolást és a beágyazott útvonalakkal való munkavégzés lehetőségét.

Általában az alkalmazás legmagasabb szintjén ad hozzá útvonalakat, gyakran az App komponensen belül. A projekt struktúrájától függően azonban bármely más helyen is meghatározhatja őket.

Nyissa meg a App.jsx fájlba, és cserélje ki a reakciókódot a következőre:

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

Ez az útválasztási konfiguráció meghatározott URL-útvonalakat képez le a megfelelő oldalösszetevőkhöz (irányítópult és Névjegy), biztosítva, hogy az alkalmazás a megfelelő összetevőt jelenítse meg, amikor a felhasználó meglátogat egy adott webhelyet URL.

Vedd észre a elem prop, az Útvonal komponensen belül, amely lehetővé teszi egy funkcionális összetevő átadását, nem csak az összetevő nevét. Ez lehetővé teszi a kellékek továbbadását az útvonalakon és a hozzájuk tartozó alkatrészeken.

Ban,-ben src könyvtárat, hozzon létre egy újat oldalakat könyvtárba, és adjon hozzá két új fájlt: Dashboard.jsx és About.jsx. Határozza meg a funkcionális összetevőket ezekben a fájlokban az útvonalak teszteléséhez.

A createBrowserRouter használata az útvonalak meghatározásához

React Router dokumentációja használatát javasolja CreateBrowserRouter összetevő a React webalkalmazások útválasztási konfigurációjának meghatározásához. Ez a komponens egy könnyű alternatíva BrowserRouter amely útvonalak tömbjét veszi argumentumaként.

Ennek az összetevőnek a használatával nincs szükség az útvonalak meghatározására az App komponensen belül. Ehelyett felvázolhatja az összes útvonal-konfigurációt a következőben index.jsx vagy main.jsx fájlt.

Íme egy példa arra, hogyan használhatja ezt az összetevőt:

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

Az útválasztási konfiguráció a CreateBrowserRouter és RouterProvider összetevőket egy React alkalmazás útválasztási rendszerének létrehozásához.

Ezzel a megvalósítással azonban az egyetlen különbség az, hogy ahelyett, hogy a BrowserRouter komponenssel csomagolná az alkalmazást, a RouterProvider komponens átadni a Router összefüggésben az alkalmazás összes összetevőjével.

Oldal-nem található útvonalak megvalósítása

A pálya prop az Útvonal összetevőben összehasonlítja a megadott elérési utat az aktuális URL-lel, hogy megállapítsa, van-e egyezés a szükséges összetevő megjelenítése előtt.

Az olyan esetek kezeléséhez, amikor egyetlen útvonal sem egyezik, létrehozhat egy adott útvonalat, amely kezelni fogja 404 oldal nem található hiba. Ennek az útvonalnak a használata biztosítja, hogy a felhasználók értelmes válaszokat kapjanak olyan helyzetekben, amikor nem létező URL-hez fértek hozzá.

A 404-es útvonal megvalósításához adja hozzá ezt az útvonalat az Útvonalak komponenshez:

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

Ezután hozzon létre egyénit NotFound.jsx komponens és végül a komponens stílusa CSS-modulok használatával.

A csillag (*) egy helyettesítő karakter, amely olyan helyzeteket kezel, amikor a megadott útvonalak egyike sem egyezik az aktuális URL-lel.

Programozott navigáció a useNavigate Hook segítségével

A useNavigate hook programozott módon kezeli a navigációt az alkalmazásokban. Ez a horog különösen akkor hasznos, ha a felhasználói interakciókra vagy eseményekre, például a gombokra történő kattintásokra vagy űrlapok beküldésére reagálva kíván navigációt indítani.

Nézzük meg, hogyan kell használni a useNavigate kampó a programozott navigációhoz. Feltéve, hogy Ön hozta létre a About.jsx funkcionális összetevő, importálja a horgot a React Router csomagból:

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

Ezután adjon hozzá egy gombot, amelyre kattintva elindítja a navigációt egy megadott útvonalra.

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

 </>
 );
}
exportdefault About;

Érdemes megemlíteni, hogy a React Router v6-ban bevezetett useNavigate hook és useNavigation hook szorosan kapcsolódó nevük ellenére eltérő célokat szolgálnak.

A useNavigation hook segítségével hozzáférhet a navigációval kapcsolatos részletekhez, például a folyamatban lévő navigáció állapotához és egyéb sajátosságokhoz. Ez akkor hasznos, ha olyan felhasználói felületelemeket szeretne megjeleníteni, mint például a betöltési pörgetők, hogy vizuális visszajelzést adjon a folyamatban lévő folyamatokról.

Íme egy példa a useNavigation hook használatára.

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

Ebben a példában a SubmitButton komponens dinamikusan frissíti a szövegét a useNavigation hook által kapott navigációs állapot alapján.

Annak ellenére, hogy ezeknek a horgoknak különböző szerepük van, továbbra is használhatja őket együtt. A useNavigate hook elindítja a navigációs folyamatot, a useNavigation hook pedig a valós idejű navigációs részletek lekéréséhez, amelyek aztán irányítják a böngészőben megjelenítendő visszajelzési felületet.

A useRoutes Hook használata

Ez a hook lehetővé teszi az útvonal útvonalak meghatározását a megfelelő összetevők mellett egy objektumon belül. Ezt követően a horog segítségével egyeztetik az útvonalakat és megjelenítik a releváns összetevőket.

Íme egy egyszerű példa a horog használatára:

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;

Ebben a példában a útvonalak objektum határozza meg az URL útvonalak hozzárendelését a komponensekhez. A App komponens ezután ezt a hookot használja az aktuális URL-címhez, és a megfelelő komponens megjelenítéséhez az egyező útvonal alapján.

Ennek a horognak a használatával részletesen szabályozhatja az útválasztási logikát, és könnyen létrehozhat egyéni útvonalkezelési logikát az alkalmazáshoz.

Útválasztás kezelése React alkalmazásokban

Bár maga a React nem tartalmaz előre beépített mechanizmust az útválasztási feladatok kezelésére, a React Router pótolja ezt a hiányt. Különféle útválasztási összetevőket és segédfunkciókat biztosít, amelyek segítségével egyszerűen hozhat létre interaktív, felhasználóbarát alkalmazásokat.