M

MLOG

Suomi

Tutustu React Router v6:n keskeisiin navigointimalleihin. Opi deklaratiivinen reititys, dynaamiset reitit, ohjelmallinen navigointi, sisäkkäiset reitit ja datanlatausstrategiat vankkojen ja käyttäjäystävällisten verkkosovellusten rakentamiseen.

React Router v6: Navigointimallien hallinta moderneissa verkkosovelluksissa

React Router v6 on tehokas ja joustava reitityskirjasto React-sovelluksille. Se mahdollistaa yhden sivun sovellusten (SPA) luomisen saumattomalla käyttökokemuksella hallinnoimalla navigointia ilman koko sivun uudelleenlatauksia. Tässä blogikirjoituksessa syvennytään React Router v6:n olennaisiin navigointimalleihin, tarjoten sinulle tiedot ja esimerkit vankkojen ja käyttäjäystävällisten verkkosovellusten rakentamiseen.

React Router v6:n ydinperiaatteiden ymmärtäminen

Ennen kuin syvennymme tiettyihin malleihin, kerrataan muutamia peruskäsitteitä:

1. Deklaratiivinen reititys <Routes>- ja <Route>-komponenteilla

React Router v6:n perusta on deklaratiivinen reititys. Määrität reittisi käyttämällä <Routes>- ja <Route>-komponentteja. <Routes>-komponentti toimii säiliönä reiteillesi, ja <Route>-komponentti määrittelee tietyn reitin ja komponentin, joka renderöidään, kun reitti vastaa nykyistä URL-osoitetta.

Esimerkki: Perusreitityksen määritys

Tässä on perusesimerkki reittien määrittämisestä yksinkertaiseen sovellukseen:


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;

Tässä esimerkissä määrittelemme kolme reittiä:

BrowserRouter-komponentti mahdollistaa selaimen historiaan perustuvan reitityksen. React Router vertaa nykyistä URL-osoitetta määriteltyihin reitteihin ja renderöi vastaavan komponentin.

2. Dynaamiset reitit URL-parametreilla

Dynaamiset reitit mahdollistavat reittien luomisen, jotka voivat käsitellä eri arvoja URL-osoitteessa. Tämä on hyödyllistä, kun halutaan näyttää sisältöä yksilöllisen tunnisteen, kuten tuotetunnuksen tai käyttäjätunnuksen, perusteella. React Router v6 käyttää :-symbolia URL-parametrien määrittelyyn.

Esimerkki: Tuotetietojen näyttäminen

Oletetaan, että sinulla on verkkokauppasovellus ja haluat näyttää kunkin tuotteen tiedot sen ID:n perusteella. Voit määrittää dynaamisen reitin näin:


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

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

  // Hae tuotetiedot productId:n perusteella
  // ...

  return (
    

      
Tuotetiedot

      
Tuotetunnus: {productId}

      {/* Näytä tuotetiedot tässä */}
    

  );
}

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

export default App;

Tässä esimerkissä:

Kansainvälistämisesimerkki: Kielikoodien käsittely

Monikielisellä sivustolla voit käyttää dynaamista reittiä kielikoodien käsittelyyn:


} />

Tämä reitti vastaisi URL-osoitteita kuten /en/about, /fr/about ja /es/about. lang-parametria voidaan sitten käyttää sopivien kieliresurssien lataamiseen.

3. Ohjelmallinen navigointi useNavigate-hookilla

Vaikka deklaratiivinen reititys sopii erinomaisesti staattisille linkeille, usein on tarpeen navigoida ohjelmallisesti käyttäjän toimintojen tai sovelluslogiikan perusteella. React Router v6 tarjoaa tähän tarkoitukseen useNavigate-hookin. useNavigate palauttaa funktion, jonka avulla voit siirtyä eri reiteille.

Esimerkki: Uudelleenohjaus lomakkeen lähetyksen jälkeen

Oletetaan, että sinulla on lomakkeen lähetys ja haluat ohjata käyttäjän onnistumissivulle, kun lomake on lähetetty onnistuneesti:


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

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

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

    // Lähetä lomakkeen tiedot
    // ...

    // Ohjaa onnistumissivulle onnistuneen lähetyksen jälkeen
    navigate("/success");
  };

  return (
    

      {/* Lomakkeen kentät */}
      
    

  );
}

export default MyForm;

Tässä esimerkissä:

Tilan (state) välittäminen navigoinnin aikana

Voit myös välittää tilaa (state) navigoinnin yhteydessä käyttämällä navigate-funktion toista argumenttia:


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

Tämä mahdollistaa datan välittämisen kohdekomponentille, johon pääsee käsiksi useLocation-hookin avulla.

4. Sisäkkäiset reitit ja asettelut (Layouts)

Sisäkkäiset reitit mahdollistavat hierarkkisten reititysrakenteiden luomisen, joissa yksi reitti on toisen sisällä. Tämä on hyödyllistä monimutkaisten sovellusten järjestämisessä, joissa on useita navigointitasoja. Tämä auttaa luomaan asetteluja, joissa tietyt käyttöliittymäelementit ovat jatkuvasti läsnä sovelluksen tietyssä osiossa.

Esimerkki: Käyttäjäprofiiliosio

Oletetaan, että sinulla on käyttäjäprofiiliosio, jossa on sisäkkäisiä reittejä käyttäjän profiilitietojen, asetusten ja tilausten näyttämiseen:


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

function Profile() {
  return (
    

      
Käyttäjäprofiili

      
    
        
  • 
          Profiilitiedot
        
    • 
        
  • 
          Asetukset
        
    • 
        
  • 
          Tilaukset
        
    • 
      


      
        } />
        } />
        } />
      
    

  );
}

function ProfileInformation() {
  return 
Profiilitiedot-komponentti
;
}

function Settings() {
  return 
Asetukset-komponentti
;
}

function Orders() {
  return 
Tilaukset-komponentti
;
}

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

export default App;

Tässä esimerkissä:

*-merkki yläreitissä on ratkaisevan tärkeä; se tarkoittaa, että yläreitin tulee vastata mitä tahansa alipolkua, mikä mahdollistaa sisäkkäisten reittien oikean vastaavuuden Profile-komponentin sisällä.

5. "Ei löydy" (404) -virheiden käsittely

On olennaista käsitellä tapaukset, joissa käyttäjä navigoi reitille, jota ei ole olemassa. React Router v6 tekee tämän helpoksi yleisreitillä (catch-all route).

Esimerkki: 404-sivun toteuttaminen


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

function NotFound() {
  return (
    

      
404 - Ei löydy

      
Etsimääsi sivua ei löydy.

      Palaa etusivulle
    

  );
}

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

Tässä esimerkissä:

6. Datanlatausstrategiat React Router v6:lla

React Router v6 ei sisällä sisäänrakennettuja datanlatausmekanismeja kuten edeltäjänsä (React Router v5 ja `useRouteMatch`). Se kuitenkin tarjoaa työkalut erilaisten datanlatausstrategioiden tehokkaaseen toteuttamiseen.

Vaihtoehto 1: Datan hakeminen komponenteissa

Yksinkertaisin lähestymistapa on hakea data suoraan reitin renderöivässä komponentissa. Voit käyttää useEffect-hookia datan hakemiseen, kun komponentti liitetään (mount) tai kun URL-parametrit muuttuvat.


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

    fetchProduct();
  }, [productId]);

  if (loading) return 
Ladataan...
;
  if (error) return 
Virhe: {error.message}
;
  if (!product) return 
Tuotetta ei löytynyt
;

  return (
    

      
{product.name}

      
{product.description}

    

  );
}

export default ProductDetails;

Tämä lähestymistapa on suoraviivainen, mutta se voi johtaa koodin monistumiseen, jos dataa täytyy hakea useissa komponenteissa. Se on myös tehottomampi, koska datan haku alkaa vasta komponentin liittämisen jälkeen.

Vaihtoehto 2: Mukautetun hookin käyttö datan hakuun

Koodin monistumisen vähentämiseksi voit luoda mukautetun hookin, joka kapseloi datanhakulogiikan. Tätä hookia voidaan sitten käyttää uudelleen useissa komponenteissa.


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-virhe! 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;

Sitten voit käyttää tätä hookia komponenteissasi:


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 
Ladataan...
;
  if (error) return 
Virhe: {error.message}
;
  if (!product) return 
Tuotetta ei löytynyt
;

  return (
    

      
{product.name}

      
{product.description}

    

  );
}

export default ProductDetails;

Vaihtoehto 3: Reitityskirjaston käyttö datanhakuominaisuuksilla (TanStack Router, Remix)

Kirjastot, kuten TanStack Router ja Remix, tarjoavat sisäänrakennettuja datanhakumekanismeja, jotka integroituvat saumattomasti reititykseen. Nämä kirjastot tarjoavat usein ominaisuuksia, kuten:

Tällaisen kirjaston käyttö voi merkittävästi yksinkertaistaa datan lataamista ja parantaa suorituskykyä, erityisesti monimutkaisissa sovelluksissa.

Palvelinpuolen renderöinti (SSR) ja staattisen sivuston generointi (SSG)

Parannetun hakukoneoptimoinnin (SEO) ja alkulatauksen suorituskyvyn saavuttamiseksi harkitse SSR:n tai SSG:n käyttöä Next.js:n tai Gatsbyn kaltaisten frameworkien kanssa. Nämä frameworkit mahdollistavat datan hakemisen palvelimella tai käännösvaiheessa ja esirenderöidyn HTML:n tarjoamisen asiakkaalle. Tämä poistaa asiakkaan tarpeen hakea dataa alkulatauksen yhteydessä, mikä johtaa nopeampaan ja SEO-ystävällisempään kokemukseen.

7. Eri reititintyyppien kanssa työskentely

React Router v6 tarjoaa erilaisia reititintoteutuksia eri ympäristöihin ja käyttötapauksiin:

Valitse reititintyyppi, joka sopii parhaiten sovelluksesi vaatimuksiin ja ympäristöön.

Yhteenveto

React Router v6 tarjoaa kattavan ja joustavan reititysratkaisun React-sovelluksille. Ymmärtämällä ja soveltamalla tässä blogikirjoituksessa käsiteltyjä navigointimalleja voit rakentaa vakaita, käyttäjäystävällisiä ja ylläpidettäviä verkkosovelluksia. Deklaratiivisesta reitityksestä <Routes>- ja <Route>-komponenteilla dynaamisiin reitteihin URL-parametreilla, ohjelmalliseen navigointiin useNavigate-hookilla ja tehokkaisiin datanlatausstrategioihin, React Router v6 antaa sinulle voimaa luoda saumattomia navigointikokemuksia käyttäjillesi. Harkitse edistyneempien reitityskirjastojen ja SSR/SSG-frameworkien tutkimista saadaksesi vielä paremman hallinnan ja suorituskyvyn optimoinnin. Muista mukauttaa nämä mallit omaan sovelluskohtaiseen tarpeeseesi ja aseta aina etusijalle selkeä ja intuitiivinen käyttökokemus.