React Router v6: Navigeerimismustrite valdamine kaasaegsetes veebirakendustes

React Router v6 on võimas ja paindlik marsruutimisteek Reacti rakendustele. See võimaldab teil luua ühelehelisi rakendusi (SPA) sujuva kasutajakogemusega, hallates navigeerimist ilma lehekülje täieliku uuesti laadimiseta. See blogipostitus süveneb olulistesse navigeerimismustritesse, kasutades React Router v6, pakkudes teile teadmisi ja näiteid robustsete ja kasutajasõbralike veebirakenduste loomiseks.

React Router v6 põhimõistete mõistmine

Enne konkreetsetesse mustritesse sukeldumist vaatame üle mõned põhimõisted:

• Deklaratiivne marsruutimine: React Router kasutab deklaratiivset lähenemist, kus te defineerite oma marsruudid Reacti komponentidena. See muudab teie marsruutimisloogika selgeks ja hallatavaks.
• Komponendid: Põhikomponentide hulka kuuluvad BrowserRouter, HashRouter, MemoryRouter, Routes ja Route.
• Hook'id: React Router pakub hook'e nagu useNavigate, useLocation, useParams ja useRoutes, et pääseda ligi marsruutimisteabele ja manipuleerida navigeerimisega.

1. Deklaratiivne marsruutimine komponentidega <Routes> ja <Route>

React Router v6 aluseks on deklaratiivne marsruutimine. Te defineerite oma marsruudid, kasutades komponente <Routes> ja <Route>. Komponent <Routes> toimib teie marsruutide konteinerina ja komponent <Route> defineerib konkreetse marsruudi ja komponendi, mida renderdada, kui see marsruut vastab praegusele URL-ile.

Näide: Põhiline marsruudi konfiguratsioon

Siin on põhiline näide marsruutide seadistamisest lihtsa rakenduse jaoks:

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;

Selles näites defineerime kolm marsruuti:

• /: Renderdab Home komponendi.
• /about: Renderdab About komponendi.
• /contact: Renderdab Contact komponendi.

Komponent BrowserRouter võimaldab brauseri ajaloo põhjal marsruutimist. React Router võrdleb praegust URL-i defineeritud marsruutidega ja renderdab vastava komponendi.

2. Dünaamilised marsruudid URL-i parameetritega

Dünaamilised marsruudid võimaldavad teil luua marsruute, mis suudavad käsitleda erinevaid väärtusi URL-is. See on kasulik sisu kuvamiseks unikaalse identifikaatori alusel, nagu toote ID või kasutaja ID. React Router v6 kasutab URL-i parameetrite defineerimiseks sümbolit :.

Näide: Toote detailide kuvamine

Oletame, et teil on e-kaubanduse rakendus ja soovite kuvada iga toote detailid selle ID alusel. Saate defineerida dünaamilise marsruudi niimoodi:

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

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

  // Hangi toote andmed productId alusel
  // ...

  return (
    

      
Toote detailid
      
Toote ID: {productId}
      {/* Kuva toote andmed siin */}
    
  );
}

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

export default App;

Selles näites:

• /products/:productId defineerib dünaamilise marsruudi, kus :productId on URL-i parameeter.
• Hook'i useParams kasutatakse productId parameetri väärtusele ligipääsemiseks ProductDetails komponendi sees.
• Seejärel saate kasutada productId-d, et hankida vastavad tooteandmed oma andmeallikast.

Rahvusvahelistamise näide: Keelekoodide käsitlemine

Mitmekeelse veebisaidi jaoks võite kasutada dünaamilist marsruuti keelekoodide käsitlemiseks:

} />

See marsruut sobiks URL-idega nagu /en/about, /fr/about ja /es/about. Parameetrit lang saab seejärel kasutada sobivate keeleressursside laadimiseks.

3. Programmiline navigeerimine hook'iga useNavigate

Kuigi deklaratiivne marsruutimine on suurepärane staatiliste linkide jaoks, on sageli vaja navigeerida programmililiselt vastavalt kasutaja tegevustele või rakenduse loogikale. React Router v6 pakub selleks otstarbeks hook'i useNavigate. useNavigate tagastab funktsiooni, mis võimaldab teil navigeerida erinevatele marsruutidele.

Näide: Ümbersuunamine pärast vormi saatmist

Oletame, et teil on vormi saatmine ja soovite kasutaja pärast vormi edukat saatmist suunata edulehele:

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

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

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

    // Saada vormi andmed
    // ...

    // Suuna edulehele pärast edukat saatmist
    navigate("/success");
  };

  return (
    

      {/* Vormi väljad */}
      Saada
    
  );
}

export default MyForm;

Selles näites:

• Kasutame useNavigate hook'i, et saada navigate funktsioon.
• Pärast vormi edukat saatmist kutsume välja navigate("/success"), et suunata kasutaja marsruudile /success.

Oleku edastamine navigeerimise ajal

Saate edastada oleku ka navigeerimisega, kasutades navigate teist argumenti:

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

See võimaldab teil edastada andmeid sihtkomponendile, millele pääseb ligi hook'i useLocation abil.

4. Pesastatud marsruudid ja paigutused

Pesastatud marsruudid võimaldavad teil luua hierarhilisi marsruutimisstruktuure, kus üks marsruut on pesastatud teise sisse. See on kasulik keerukate rakenduste organiseerimiseks, millel on mitu navigeerimistasandit. See aitab luua paigutusi, kus teatud kasutajaliidese elemendid on rakenduse ühes osas järjepidevalt olemas.

Näide: Kasutajaprofiili sektsioon

Oletame, et teil on kasutajaprofiili sektsioon pesastatud marsruutidega kasutaja profiiliteabe, seadete ja tellimuste kuvamiseks:

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

function Profile() {
  return (
    

      
Kasutajaprofiil
      

        

          Profiili teave
        
        

          Seaded
        
        

          Tellimused
        
      

      
        } />
        } />
        } />
      
    
  );
}

function ProfileInformation() {
  return 
Profiili teabe komponent
;
}

function Settings() {
  return 
Seadete komponent
;
}

function Orders() {
  return 
Tellimuste komponent
;
}

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

export default App;

Selles näites:

• Marsruut /profile/* sobitub mis tahes URL-iga, mis algab /profile-ga.
• Komponent Profile renderdab navigeerimismenüü ja <Routes> komponendi pesastatud marsruutide käsitlemiseks.
• Pesastatud marsruudid defineerivad komponendid, mida renderdada marsruutide /profile/info, /profile/settings ja /profile/orders jaoks.

Tärn * vanemmarsruudis on ülioluline; see tähistab, et vanemmarsruut peaks sobima mis tahes alamteega, võimaldades pesastatud marsruutidel õigesti sobituda Profile komponendi sees.

5. "Not Found" (404) vigade käsitlemine

On oluline käsitleda juhtumeid, kus kasutaja navigeerib marsruudile, mida pole olemas. React Router v6 muudab selle lihtsaks kõikehõlmava marsruudiga.

Näide: 404 lehe implementeerimine

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

function NotFound() {
  return (
    

      
404 - Ei leitud
      
Lehte, mida otsite, ei eksisteeri.
      Mine tagasi avalehele
    
  );
}

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

Selles näites:

• Marsruut <Route path="*" element={<NotFound />} /> on kõikehõlmav marsruut, mis sobitub iga URL-iga, mis ei sobi ühegi teise defineeritud marsruudiga.
• On oluline paigutada see marsruut <Routes> komponendi lõppu, et see sobituks ainult siis, kui ükski teine marsruut ei sobi.

6. Andmete laadimise strateegiad React Router v6-ga

React Router v6 ei sisalda sisseehitatud andmete laadimise mehhanisme nagu tema eelkäija (React Router v5 koos `useRouteMatch`-iga). Kuid see pakub tööriistu erinevate andmete laadimise strateegiate tõhusaks rakendamiseks.

Variant 1: Andmete hankimine komponentides

Lihtsaim lähenemine on andmete hankimine otse komponendis, mis renderdab marsruudi. Saate kasutada useEffect hook'i andmete hankimiseks, kui komponent laaditakse või kui URL-i parameetrid muutuvad.

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 viga! staatus: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Laadimine...
;
  if (error) return 
Viga: {error.message}
;
  if (!product) return 
Toodet ei leitud
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

See lähenemine on otsekohene, kuid võib põhjustada koodi dubleerimist, kui teil on vaja andmeid hankida mitmes komponendis. See on ka vähem tõhus, kuna andmete hankimine algab alles pärast komponendi laadimist.

Variant 2: Kohandatud hook'i kasutamine andmete hankimiseks

Koodi dubleerimise vähendamiseks saate luua kohandatud hook'i, mis kapseldab andmete hankimise loogika. Seda hook'i saab seejärel taaskasutada mitmes komponendis.

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 viga! staatus: ${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;

Seejärel saate seda hook'i oma komponentides kasutada:

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 
Laadimine...
;
  if (error) return 
Viga: {error.message}
;
  if (!product) return 
Toodet ei leitud
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Variant 3: Andmete hankimise võimekusega marsruutimisteegi kasutamine (TanStack Router, Remix)

Teegid nagu TanStack Router ja Remix pakuvad sisseehitatud andmete hankimise mehhanisme, mis integreeruvad sujuvalt marsruutimisega. Need teegid pakuvad sageli funktsioone nagu:

• Laadijad (Loaders): Funktsioonid, mis käivitatakse *enne* marsruudi renderdamist, võimaldades teil andmeid hankida ja need komponendile edastada.
• Toimingud (Actions): Funktsioonid, mis käsitlevad vormide saatmist ja andmete mutatsioone.

Sellise teegi kasutamine võib andmete laadimist drastiliselt lihtsustada ja parandada jõudlust, eriti keerukate rakenduste puhul.

Serveripoolne renderdamine (SSR) ja staatilise saidi genereerimine (SSG)

Parema SEO ja esialgse laadimisjõudluse saavutamiseks kaaluge SSR-i või SSG-d raamistikega nagu Next.js või Gatsby. Need raamistikud võimaldavad teil andmeid hankida serveris või ehitamise ajal ja serveerida kliendile eelrenderdatud HTML-i. See välistab vajaduse, et klient peaks esialgsel laadimisel andmeid hankima, mille tulemuseks on kiirem ja SEO-sõbralikum kogemus.

7. Erinevate marsruuteritüüpidega töötamine

React Router v6 pakub erinevaid marsruuteri implementatsioone, mis sobivad erinevate keskkondade ja kasutusjuhtudega:

• BrowserRouter: Kasutab navigeerimiseks HTML5 ajaloo API-d (pushState, replaceState). See on kõige levinum valik veebirakendustele, mis töötavad brauseri keskkonnas.
• HashRouter: Kasutab navigeerimiseks URL-i räsi osa (#). See on kasulik rakendustele, mis peavad toetama vanemaid brausereid või mis on paigaldatud serveritele, mis ei toeta HTML5 ajaloo API-d.
• MemoryRouter: Hoiab teie "URL-i" ajalugu mälus (URL-ide massiiv). Kasulik keskkondades nagu React Native ja testimisel.

Valige marsruuteri tüüp, mis sobib kõige paremini teie rakenduse nõuete ja keskkonnaga.

Kokkuvõte

React Router v6 pakub terviklikku ja paindlikku marsruutimislahendust Reacti rakendustele. Mõistes ja rakendades selles blogipostituses arutatud navigeerimismustreid, saate ehitada robustseid, kasutajasõbralikke ja hooldatavaid veebirakendusi. Alates deklaratiivsest marsruutimisest komponentidega <Routes> ja <Route> kuni dünaamiliste marsruutideni URL-i parameetritega, programmilise navigeerimiseni useNavigate'iga ja tõhusate andmete laadimise strateegiateni, annab React Router v6 teile võimekuse luua oma kasutajatele sujuvaid navigeerimiskogemusi. Kaaluge täiustatud marsruutimisteekide ja SSR/SSG raamistike uurimist veelgi suurema kontrolli ja jõudluse optimeerimiseks. Pidage meeles, et kohandage neid mustreid oma konkreetse rakenduse nõuetele ja seadke alati esikohale selge ja intuitiivne kasutajakogemus.