M

MLOG

Magyar

Ismerje meg a React Router v6 alapvető navigációs mintáit. Tanulja meg a deklaratív útválasztást, a dinamikus és beágyazott útvonalakat, a programozott navigációt és az adatbetöltési stratégiákat robusztus és felhasználóbarát webalkalmazások készítéséhez.

React Router v6: Navigációs Minták Mesterfokon a Modern Webalkalmazásokhoz

A React Router v6 egy erőteljes és rugalmas útválasztási (routing) könyvtár React alkalmazásokhoz. Lehetővé teszi egyoldalas alkalmazások (SPA-k) létrehozását zökkenőmentes felhasználói élménnyel, a teljes oldalújratöltés nélküli navigáció kezelésével. Ez a blogbejegyzés a React Router v6 alapvető navigációs mintáit mutatja be, megadva a tudást és a példákat robusztus és felhasználóbarát webalkalmazások építéséhez.

A React Router v6 Alapkoncepcióinak Megértése

Mielőtt belevágnánk a konkrét mintákba, tekintsünk át néhány alapvető fogalmat:

1. Deklaratív Útválasztás a <Routes> és <Route> Komponensekkel

A React Router v6 alapja a deklaratív útválasztás. Az útvonalakat a <Routes> és <Route> komponensek segítségével definiálja. A <Routes> komponens konténerként szolgál az útvonalak számára, a <Route> komponens pedig egy adott útvonalat és a hozzá tartozó komponenst határozza meg, amely akkor renderelődik, amikor az útvonal megfelel az aktuális URL-nek.

Példa: Alapvető Útvonal Konfiguráció

Íme egy alapvető példa egy egyszerű alkalmazás útvonalainak beállítására:


import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

Ebben a példában három útvonalat definiálunk:

A BrowserRouter komponens teszi lehetővé a böngésző előzményeken alapuló útválasztást. A React Router összeveti az aktuális URL-t a definiált útvonalakkal, és rendereli a megfelelő komponenst.

2. Dinamikus Útvonalak URL Paraméterekkel

A dinamikus útvonalak lehetővé teszik olyan útvonalak létrehozását, amelyek különböző értékeket képesek kezelni az URL-ben. Ez hasznos egyedi azonosítókon, például termék- vagy felhasználói azonosítón alapuló tartalom megjelenítéséhez. A React Router v6 a : szimbólumot használja az URL paraméterek definiálására.

Példa: Termék Részleteinek Megjelenítése

Tegyük fel, hogy van egy e-kereskedelmi alkalmazása, és minden termék részleteit az azonosítója alapján szeretné megjeleníteni. Definiálhat egy ilyen dinamikus útvonalat:


import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // Fetch product details based on productId
  // ...

  return (
    

      
Product Details

      
Product ID: {productId}

      {/* Display product details here */}
    

  );
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Ebben a példában:

Nemzetköziesítési Példa: Nyelvi Kódok Kezelése

Egy többnyelvű weboldal esetén használhat egy dinamikus útvonalat a nyelvi kódok kezelésére:


} />

Ez az útvonal illeszkedne az olyan URL-ekre, mint a /en/about, /fr/about és /es/about. A lang paramétert ezután a megfelelő nyelvi források betöltésére lehet használni.

3. Programozott Navigáció a useNavigate Hookkal

Míg a deklaratív útválasztás kiváló a statikus linkekhez, gyakran van szükség programozott navigációra felhasználói műveletek vagy alkalmazáslogika alapján. A React Router v6 erre a célra a useNavigate hookot biztosítja. A useNavigate egy függvényt ad vissza, amely lehetővé teszi a különböző útvonalakra való navigálást.

Példa: Átirányítás Űrlap Elküldése Után

Tegyük fel, hogy van egy űrlapja, és a sikeres elküldés után át szeretné irányítani a felhasználót egy sikert jelző oldalra:


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

function MyForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Submit the form data
    // ...

    // Redirect to the success page after successful submission
    navigate("/success");
  };

  return (
    

      {/* Form fields */}
      
    

  );
}

export default MyForm;

Ebben a példában:

Állapot (State) Átadása Navigáció Során

Állapotot is átadhat a navigációval a navigate második argumentumaként:


navigate("/confirmation", { state: { orderId: "12345" } });

Ez lehetővé teszi adatok átadását a célkomponensnek, amelyeket a useLocation hook segítségével lehet elérni.

4. Beágyazott Útvonalak és Elrendezések

A beágyazott útvonalak lehetővé teszik hierarchikus útválasztási struktúrák létrehozását, ahol az egyik útvonal egy másikba van ágyazva. Ez hasznos a komplex, több navigációs szinttel rendelkező alkalmazások szervezésében. Segít olyan elrendezések (layout) létrehozásában, ahol bizonyos UI elemek következetesen jelen vannak az alkalmazás egy adott szakaszában.

Példa: Felhasználói Profil Szekció

Tegyük fel, hogy van egy felhasználói profil szekciója beágyazott útvonalakkal a felhasználó profilinformációinak, beállításainak és rendeléseinek megjelenítésére:


import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
User Profile

      
    
        
  • 
          Profile Information
        
    • 
        
  • 
          Settings
        
    • 
        
  • 
          Orders
        
    • 
      


      
        } />
        } />
        } />
      
    

  );
}

function ProfileInformation() {
  return 
Profile Information Component
;
}

function Settings() {
  return 
Settings Component
;
}

function Orders() {
  return 
Orders Component
;
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Ebben a példában:

A * a szülő útvonalban kulcsfontosságú; azt jelzi, hogy a szülő útvonalnak bármely al-útvonalra illeszkednie kell, lehetővé téve a beágyazott útvonalak megfelelő illesztését a Profile komponensen belül.

5. "Nem Található" (404) Hibák Kezelése

Létfontosságú kezelni azokat az eseteket, amikor a felhasználó egy nem létező útvonalra navigál. A React Router v6 ezt egy mindenre illeszkedő (catch-all) útvonallal teszi egyszerűvé.

Példa: 404-es Oldal Megvalósítása


import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - Not Found

      
The page you are looking for does not exist.

      Go back to home
    

  );
}

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

Ebben a példában:

6. Adatbetöltési Stratégiák a React Router v6-tal

A React Router v6 nem tartalmaz beépített adatbetöltési mechanizmusokat, mint az elődje (React Router v5 a `useRouteMatch`-csel). Azonban biztosítja az eszközöket a különböző adatbetöltési stratégiák hatékony megvalósításához.

1. Opció: Adatlekérés a Komponensekben

A legegyszerűbb megközelítés az adatok közvetlen lekérése az útvonalat renderelő komponensen belül. A useEffect hook segítségével lekérheti az adatokat, amikor a komponens betöltődik (mount), vagy amikor az URL paraméterek megváltoznak.


import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  if (!product) return 
Product not found
;

  return (
    

      
{product.name}

      
{product.description}

    

  );
}

export default ProductDetails;

Ez a megközelítés egyszerű, de kódduplikációhoz vezethet, ha több komponensben is adatokat kell lekérni. Emellett kevésbé hatékony, mert az adatlekérés csak a komponens betöltődése után kezdődik.

2. Opció: Egyedi Hook Használata Adatlekéréshez

A kódduplikáció csökkentése érdekében létrehozhat egy egyedi hookot, amely magába foglalja az adatlekérési logikát. Ezt a hookot aztán több komponensben is újra felhasználhatja.


import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Ezután használhatja ezt a hookot a komponenseiben:


import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  if (!product) return 
Product not found
;

  return (
    

      
{product.name}

      
{product.description}

    

  );
}

export default ProductDetails;

3. Opció: Adatbetöltési Képességekkel Rendelkező Útválasztási Könyvtár Használata (TanStack Router, Remix)

Az olyan könyvtárak, mint a TanStack Router és a Remix beépített adatlekérési mechanizmusokat kínálnak, amelyek zökkenőmentesen integrálódnak az útválasztással. Ezek a könyvtárak gyakran olyan funkciókat biztosítanak, mint:

Egy ilyen könyvtár használata drasztikusan leegyszerűsítheti az adatbetöltést és javíthatja a teljesítményt, különösen komplex alkalmazások esetében.

Szerveroldali Megjelenítés (SSR) és Statikus Oldalgenerálás (SSG)

A jobb SEO és a gyorsabb kezdeti betöltés érdekében fontolja meg az SSR vagy SSG használatát olyan keretrendszerekkel, mint a Next.js vagy a Gatsby. Ezek a keretrendszerek lehetővé teszik az adatok lekérését a szerveren vagy a buildelés során, és előre renderelt HTML-t szolgálnak ki a kliensnek. Ezzel a kliensnek nem kell adatokat lekérnie a kezdeti betöltéskor, ami gyorsabb és SEO-barátabb élményt eredményez.

7. Különböző Router Típusokkal Való Munka

A React Router v6 különböző router implementációkat kínál a különféle környezetekhez és felhasználási esetekhez:

Válassza ki az alkalmazás követelményeinek és környezetének leginkább megfelelő router típust.

Összegzés

A React Router v6 egy átfogó és rugalmas útválasztási megoldást kínál a React alkalmazásokhoz. A blogbejegyzésben tárgyalt navigációs minták megértésével és alkalmazásával robusztus, felhasználóbarát és karbantartható webalkalmazásokat építhet. A deklaratív útválasztástól (<Routes> és <Route>) a dinamikus útvonalakon és a programozott navigáción (useNavigate) át a hatékony adatbetöltési stratégiákig, a React Router v6 képessé teszi Önt arra, hogy zökkenőmentes navigációs élményt nyújtson felhasználóinak. Fontolja meg a haladóbb útválasztási könyvtárak és az SSR/SSG keretrendszerek felfedezését a még nagyobb kontroll és teljesítményoptimalizálás érdekében. Ne felejtse el ezeket a mintákat az adott alkalmazás követelményeihez igazítani, és mindig helyezze előtérbe a tiszta és intuitív felhasználói élményt.