React Router v6: Navigacijos modelių įvaldymas šiuolaikinėms žiniatinklio programoms

React Router v6 yra galinga ir lanksti maršruto parinkimo biblioteka, skirta React programoms. Ji leidžia kurti vieno puslapio programas (angl. single-page applications, SPA) su sklandžia vartotojo patirtimi, valdant navigaciją be pilnų puslapio perkrovimų. Šiame tinklaraščio įraše gilinsimės į esminius navigacijos modelius naudojant React Router v6, suteikdami jums žinių ir pavyzdžių, kaip kurti patikimas ir patogias žiniatinklio programas.

React Router v6 pagrindinių koncepcijų supratimas

Prieš gilinantis į konkrečius modelius, peržvelkime keletą pagrindinių koncepcijų:

• Deklaratyvus maršruto parinkimas: React Router naudoja deklaratyvų požiūrį, kai savo maršrutus apibrėžiate kaip React komponentus. Tai daro jūsų maršruto parinkimo logiką aiškią ir lengvai prižiūrimą.
• Komponentai: Pagrindiniai komponentai apima BrowserRouter, HashRouter, MemoryRouter, Routes ir Route.
• „Hooks“ (liet. kabliukai): React Router suteikia „hooks“ kaip useNavigate, useLocation, useParams ir useRoutes, kad būtų galima pasiekti maršruto parinkimo informaciją ir valdyti navigaciją.

1. Deklaratyvus maršruto parinkimas su <Routes> ir <Route>

React Router v6 pagrindas yra deklaratyvus maršruto parinkimas. Savo maršrutus apibrėžiate naudodami <Routes> ir <Route> komponentus. <Routes> komponentas veikia kaip jūsų maršrutų konteineris, o <Route> komponentas apibrėžia konkretų maršrutą ir komponentą, kuris bus atvaizduojamas, kai maršrutas atitiks dabartinį URL.

Pavyzdys: Pagrindinė maršrutų konfigūracija

Štai pagrindinis pavyzdys, kaip nustatyti maršrutus paprastai programai:

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;

Šiame pavyzdyje apibrėžiame tris maršrutus:

• /: Atvaizduoja Home komponentą.
• /about: Atvaizduoja About komponentą.
• /contact: Atvaizduoja Contact komponentą.

BrowserRouter komponentas įgalina naršyklės istorija pagrįstą maršruto parinkimą. React Router palygina dabartinį URL su apibrėžtais maršrutais ir atvaizduoja atitinkamą komponentą.

2. Dinaminiai maršrutai su URL parametrais

Dinaminiai maršrutai leidžia kurti maršrutus, kurie gali apdoroti skirtingas URL reikšmes. Tai naudinga norint rodyti turinį pagal unikalų identifikatorių, pavyzdžiui, produkto ID arba vartotojo ID. React Router v6 naudoja : simbolį URL parametrams apibrėžti.

Pavyzdys: Produkto detalios informacijos rodymas

Tarkime, turite el. prekybos programą ir norite rodyti kiekvieno produkto detales pagal jo ID. Galite apibrėžti dinaminį maršrutą taip:

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

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

  // Gaunamos produkto detalės pagal productId
  // ...

  return (
    

      
Produkto detalės
      
Produkto ID: {productId}
      {/* Čia rodomos produkto detalės */}
    
  );
}

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

export default App;

Šiame pavyzdyje:

• /products/:productId apibrėžia dinaminį maršrutą, kuriame :productId yra URL parametras.
• useParams „hook“ naudojamas norint pasiekti productId parametro reikšmę ProductDetails komponente.
• Tada galite naudoti productId, kad gautumėte atitinkamą produkto informaciją iš savo duomenų šaltinio.

Internacionalizacijos pavyzdys: Kalbos kodų tvarkymas

Daugiakalbei svetainei galite naudoti dinaminį maršrutą kalbos kodams tvarkyti:

} />

Šis maršrutas atitiktų tokius URL kaip /en/about, /fr/about ir /es/about. Tuomet lang parametras gali būti naudojamas atitinkamiems kalbos ištekliams įkelti.

3. Programinė navigacija su useNavigate

Nors deklaratyvus maršruto parinkimas puikiai tinka statinėms nuorodoms, dažnai reikia naviguoti programiškai, atsižvelgiant į vartotojo veiksmus ar programos logiką. React Router v6 šiam tikslui suteikia useNavigate „hook“. useNavigate grąžina funkciją, kuri leidžia naviguoti į skirtingus maršrutus.

Pavyzdys: Nukreipimas po formos pateikimo

Tarkime, turite formos pateikimą ir norite nukreipti vartotoją į sėkmės puslapį, kai forma sėkmingai pateikta:

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

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

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

    // Pateikiami formos duomenys
    // ...

    // Po sėkmingo pateikimo nukreipiama į sėkmės puslapį
    navigate("/success");
  };

  return (
    

      {/* Formos laukai */}
      Pateikti
    
  );
}

export default MyForm;

Šiame pavyzdyje:

• Mes naudojame useNavigate „hook“, kad gautume navigate funkciją.
• Sėkmingai pateikus formą, iškviečiame navigate("/success"), kad nukreiptume vartotoją į /success maršrutą.

Būsenos (state) perdavimas navigacijos metu

Taip pat galite perduoti būseną (state) kartu su navigacija, naudodami antrąjį navigate funkcijos argumentą:

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

Tai leidžia perduoti duomenis tiksliniam komponentui, kuriuos galima pasiekti naudojant useLocation „hook“.

4. Įdėtieji maršrutai ir maketai (Layouts)

Įdėtieji maršrutai leidžia kurti hierarchines maršruto parinkimo struktūras, kai vienas maršrutas yra įdėtas į kitą. Tai naudinga organizuojant sudėtingas programas su keliais navigacijos lygiais. Tai padeda kurti maketus, kuriuose tam tikri vartotojo sąsajos elementai nuosekliai išlieka visoje programos dalyje.

Pavyzdys: Vartotojo profilio skiltis

Tarkime, turite vartotojo profilio skiltį su įdėtaisiais maršrutais, skirtais vartotojo profilio informacijai, nustatymams ir užsakymams rodyti:

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

function Profile() {
  return (
    

      
Vartotojo profilis
      

        

          Profilio informacija
        
        

          Nustatymai
        
        

          Užsakymai
        
      

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

function ProfileInformation() {
  return 
Profilio informacijos komponentas
;
}

function Settings() {
  return 
Nustatymų komponentas
;
}

function Orders() {
  return 
Užsakymų komponentas
;
}

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

export default App;

Šiame pavyzdyje:

• /profile/* maršrutas atitinka bet kokį URL, kuris prasideda /profile.
• Profile komponentas atvaizduoja navigacijos meniu ir <Routes> komponentą, skirtą įdėtiesiems maršrutams tvarkyti.
• Įdėtieji maršrutai apibrėžia komponentus, kurie bus atvaizduojami maršrutams /profile/info, /profile/settings ir /profile/orders.

* simbolis tėviniame maršrute yra labai svarbus; jis reiškia, kad tėvinis maršrutas turi atitikti bet kokį pomaršrutį, leidžiant įdėtiesiems maršrutams būti tinkamai suderintiems Profile komponente.

5. „Nerasta“ (404) klaidų tvarkymas

Būtina tvarkyti atvejus, kai vartotojas nukeliauja į neegzistuojantį maršrutą. React Router v6 tai palengvina naudojant „catch-all“ (liet. viską sugaunantį) maršrutą.

Pavyzdys: 404 puslapio įgyvendinimas

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

function NotFound() {
  return (
    

      
404 - Nerasta
      
Puslapis, kurio ieškote, neegzistuoja.
      Grįžti į pagrindinį puslapį
    
  );
}

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

Šiame pavyzdyje:

• <Route path="*" element={<NotFound />} /> maršrutas yra „catch-all“ maršrutas, atitinkantis bet kokį URL, kuris neatitinka jokio kito apibrėžto maršruto.
• Svarbu šį maršrutą patalpinti <Routes> komponento pabaigoje, kad jis suveiktų tik tada, kai neatitinka joks kitas maršrutas.

6. Duomenų įkėlimo strategijos su React Router v6

React Router v6 neturi integruotų duomenų įkėlimo mechanizmų, kaip jo pirmtakas (React Router v5 su `useRouteMatch`). Tačiau ji suteikia įrankius, leidžiančius efektyviai įgyvendinti įvairias duomenų įkėlimo strategijas.

1 variantas: Duomenų gavimas komponentuose

Paprasčiausias būdas yra gauti duomenis tiesiogiai komponente, kuris atvaizduoja maršrutą. Galite naudoti useEffect „hook“, kad gautumėte duomenis, kai komponentas yra prijungiamas (mounts) arba kai pasikeičia URL parametrai.

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 
Įkeliama...
;
  if (error) return 
Klaida: {error.message}
;
  if (!product) return 
Produktas nerastas
;

  return (
    

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

export default ProductDetails;

Šis metodas yra paprastas, bet gali sukelti kodo dubliavimąsi, jei reikia gauti duomenis keliuose komponentuose. Be to, jis yra mažiau efektyvus, nes duomenų gavimas pradedamas tik po to, kai komponentas yra prijungiamas.

2 variantas: Pasirinktinio „hook“ naudojimas duomenų gavimui

Norėdami sumažinti kodo dubliavimąsi, galite sukurti pasirinktinį „hook“, kuris apgaubia duomenų gavimo logiką. Šis „hook“ gali būti pakartotinai naudojamas keliuose komponentuose.

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;

Tada galite naudoti šį „hook“ savo komponentuose:

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 
Įkeliama...
;
  if (error) return 
Klaida: {error.message}
;
  if (!product) return 
Produktas nerastas
;

  return (
    

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

export default ProductDetails;

3 variantas: Maršruto parinkimo bibliotekos su duomenų gavimo galimybėmis naudojimas (TanStack Router, Remix)

Bibliotekos, tokios kaip TanStack Router ir Remix, siūlo integruotus duomenų gavimo mechanizmus, kurie sklandžiai integruojasi su maršruto parinkimu. Šios bibliotekos dažnai suteikia tokias funkcijas kaip:

• Įkrovikliai (Loaders): Funkcijos, kurios vykdomos *prieš* atvaizduojant maršrutą, leidžiančios gauti duomenis ir perduoti juos komponentui.
• Veiksmai (Actions): Funkcijos, kurios tvarko formų pateikimus ir duomenų mutacijas.

Tokios bibliotekos naudojimas gali radikaliai supaprastinti duomenų įkėlimą ir pagerinti našumą, ypač sudėtingoms programoms.

Serverio pusės atvaizdavimas (SSR) ir statinių svetainių generavimas (SSG)

Siekiant pagerinti SEO ir pradinį įkėlimo našumą, apsvarstykite galimybę naudoti SSR arba SSG su karkasais, tokiais kaip Next.js ar Gatsby. Šie karkasai leidžia gauti duomenis serveryje arba kūrimo metu (build time) ir pateikti klientui iš anksto atvaizduotą HTML. Tai pašalina poreikį klientui gauti duomenis pradinio įkėlimo metu, o tai lemia greitesnę ir SEO draugiškesnę patirtį.

7. Darbas su skirtingais maršrutizatorių tipais

React Router v6 siūlo skirtingas maršrutizatorių implementacijas, tinkančias įvairioms aplinkoms ir naudojimo atvejams:

• BrowserRouter: Navigacijai naudoja HTML5 istorijos API (pushState, replaceState). Tai yra dažniausias pasirinkimas žiniatinklio programoms, veikiančioms naršyklės aplinkoje.
• HashRouter: Navigacijai naudoja URL grotažymių dalį (#). Tai naudinga programoms, kurios turi palaikyti senesnes naršykles arba yra diegiamos serveriuose, nepalaikančiuose HTML5 istorijos API.
• MemoryRouter: Laiko jūsų „URL“ istoriją atmintyje (URL masyve). Naudinga tokiose aplinkose kaip React Native ir testavimas.

Pasirinkite maršrutizatoriaus tipą, kuris geriausiai atitinka jūsų programos reikalavimus ir aplinką.

Išvada

React Router v6 suteikia išsamų ir lankstų maršruto parinkimo sprendimą React programoms. Suprasdami ir taikydami šiame tinklaraščio įraše aptartus navigacijos modelius, galite kurti patikimas, patogias vartotojui ir lengvai prižiūrimas žiniatinklio programas. Nuo deklaratyvaus maršruto parinkimo su <Routes> ir <Route> iki dinaminių maršrutų su URL parametrais, programinės navigacijos su useNavigate ir efektyvių duomenų įkėlimo strategijų – React Router v6 suteikia jums galią kurti sklandžią navigacijos patirtį savo vartotojams. Apsvarstykite galimybę išbandyti pažangesnes maršruto parinkimo bibliotekas ir SSR/SSG karkasus dar didesnei kontrolei ir našumo optimizavimui. Nepamirškite pritaikyti šių modelių pagal savo konkrečios programos reikalavimus ir visada teikite pirmenybę aiškiai ir intuityviai vartotojo patirčiai.