M

MLOG

Nederlands

Ontdek essentiële navigatiepatronen met React Router v6. Leer declaratieve routing, dynamische routes, programmatische navigatie, geneste routes en datalaadstrategieën voor het bouwen van robuuste en gebruiksvriendelijke webapplicaties.

React Router v6: Navigatiepatronen voor Moderne Webapps Meester Maken

React Router v6 is een krachtige en flexibele routing-bibliotheek voor React-applicaties. Het stelt je in staat om single-page applications (SPA's) te creëren met een naadloze gebruikerservaring door navigatie te beheren zonder de pagina volledig opnieuw te laden. Deze blogpost duikt in essentiële navigatiepatronen met React Router v6, en biedt je de kennis en voorbeelden om robuuste en gebruiksvriendelijke webapplicaties te bouwen.

De Kernconcepten van React Router v6 Begrijpen

Voordat we in specifieke patronen duiken, laten we enkele fundamentele concepten doornemen:

1. Declaratieve Routing met <Routes> en <Route>

De basis van React Router v6 ligt in declaratieve routing. Je definieert je routes met de componenten <Routes> en <Route>. De <Routes>-component fungeert als een container voor je routes, en de <Route>-component definieert een specifieke route en de component die moet worden weergegeven wanneer die route overeenkomt met de huidige URL.

Voorbeeld: Basis Routeconfiguratie

Hier is een basisvoorbeeld van het opzetten van routes voor een eenvoudige applicatie:


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;

In dit voorbeeld definiëren we drie routes:

De BrowserRouter-component maakt routing mogelijk op basis van de browsergeschiedenis. React Router vergelijkt de huidige URL met de gedefinieerde routes en rendert de corresponderende component.

2. Dynamische Routes met URL-parameters

Met dynamische routes kun je routes creëren die verschillende waarden in de URL kunnen verwerken. Dit is handig voor het weergeven van content op basis van een unieke identifier, zoals een product-ID of een gebruikers-ID. React Router v6 gebruikt het : symbool om URL-parameters te definiëren.

Voorbeeld: Productdetails Weergeven

Stel je hebt een e-commerce applicatie en wilt details voor elk product weergeven op basis van zijn ID. Je kunt een dynamische route als volgt definiëren:


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

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

  // Haal productdetails op basis van productId
  // ...

  return (
    

      
Productdetails

      
Product ID: {productId}

      {/* Toon hier productdetails */}
    

  );
}

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

export default App;

In dit voorbeeld:

Internationalisatievoorbeeld: Taalcodes Verwerken

Voor een meertalige website kun je een dynamische route gebruiken om taalcodes te verwerken:


} />

Deze route zou overeenkomen met URL's zoals /en/about, /fr/about en /es/about. De lang-parameter kan vervolgens worden gebruikt om de juiste taalbronnen te laden.

3. Programmatische Navigatie met useNavigate

Hoewel declaratieve routing geweldig is voor statische links, moet je vaak programmatisch navigeren op basis van gebruikersacties of applicatielogica. React Router v6 biedt hiervoor de useNavigate-hook. useNavigate retourneert een functie waarmee je naar verschillende routes kunt navigeren.

Voorbeeld: Doorverwijzen na Formulierverzending

Stel, je hebt een formulierverzending en wilt de gebruiker doorverwijzen naar een succespagina nadat het formulier succesvol is verzonden:


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

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

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

    // Verzend de formuliergegevens
    // ...

    // Verwijs door naar de succespagina na succesvolle verzending
    navigate("/success");
  };

  return (
    

      {/* Formuliervelden */}
      
    

  );
}

export default MyForm;

In dit voorbeeld:

State Doorgeven Tijdens Navigatie

Je kunt ook state meegeven met de navigatie door het tweede argument van navigate te gebruiken:


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

Dit stelt je in staat om data door te geven aan de doelcomponent, die benaderd kan worden met de useLocation-hook.

4. Geneste Routes en Layouts

Geneste routes stellen je in staat om hiërarchische routingstructuren te creëren, waarbij de ene route binnen de andere is genest. Dit is handig voor het organiseren van complexe applicaties met meerdere navigatieniveaus. Dit helpt bij het creëren van layouts waarbij bepaalde UI-elementen consistent aanwezig zijn in een deel van de applicatie.

Voorbeeld: Gebruikersprofielsectie

Stel, je hebt een gebruikersprofielsectie met geneste routes voor het weergeven van de profielinformatie, instellingen en bestellingen van de gebruiker:


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

function Profile() {
  return (
    

      
Gebruikersprofiel

      
    
        
  • 
          Profielinformatie
        
    • 
        
  • 
          Instellingen
        
    • 
        
  • 
          Bestellingen
        
    • 
      


      
        } />
        } />
        } />
      
    

  );
}

function ProfileInformation() {
  return 
Profielinformatie Component
;
}

function Settings() {
  return 
Instellingen Component
;
}

function Orders() {
  return 
Bestellingen Component
;
}

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

export default App;

In dit voorbeeld:

De * in de bovenliggende route is cruciaal; het geeft aan dat de bovenliggende route moet overeenkomen met elk subpad, waardoor de geneste routes correct kunnen worden gematcht binnen de Profile-component.

5. "Not Found" (404) Fouten Afhandelen

Het is essentieel om gevallen af te handelen waarbij de gebruiker navigeert naar een route die niet bestaat. React Router v6 maakt dit eenvoudig met een 'catch-all'-route.

Voorbeeld: Een 404-pagina Implementeren


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

function NotFound() {
  return (
    

      
404 - Niet Gevonden

      
De pagina die u zoekt, bestaat niet.

      Ga terug naar de startpagina
    

  );
}

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

In dit voorbeeld:

6. Datalaadstrategieën met React Router v6

React Router v6 bevat geen ingebouwde mechanismen voor het laden van data zoals zijn voorganger (React Router v5 met `useRouteMatch`). Het biedt echter de tools om verschillende datalaadstrategieën effectief te implementeren.

Optie 1: Data Ophalen in Componenten

De eenvoudigste aanpak is om data rechtstreeks op te halen binnen de component die de route rendert. Je kunt de useEffect-hook gebruiken om data op te halen wanneer de component mount of wanneer de URL-parameters veranderen.


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 
Laden...
;
  if (error) return 
Fout: {error.message}
;
  if (!product) return 
Product niet gevonden
;

  return (
    

      
{product.name}

      
{product.description}

    

  );
}

export default ProductDetails;

Deze aanpak is eenvoudig maar kan leiden tot code-duplicatie als je data in meerdere componenten moet ophalen. Het is ook minder efficiënt omdat het ophalen van data pas begint nadat de component is gemount.

Optie 2: Een Aangepaste Hook Gebruiken voor Data-ophaling

Om code-duplicatie te verminderen, kun je een aangepaste hook maken die de logica voor het ophalen van data inkapselt. Deze hook kan vervolgens worden hergebruikt in meerdere componenten.


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;

Vervolgens kun je deze hook in je componenten gebruiken:


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 
Laden...
;
  if (error) return 
Fout: {error.message}
;
  if (!product) return 
Product niet gevonden
;

  return (
    

      
{product.name}

      
{product.description}

    

  );
}

export default ProductDetails;

Optie 3: Een Routing-bibliotheek met Data-ophaalmogelijkheden Gebruiken (TanStack Router, Remix)

Bibliotheken zoals TanStack Router en Remix bieden ingebouwde mechanismen voor het ophalen van data die naadloos integreren met routing. Deze bibliotheken bieden vaak functies zoals:

Het gebruik van zo'n bibliotheek kan het laden van data drastisch vereenvoudigen en de prestaties verbeteren, vooral voor complexe applicaties.

Server-Side Rendering (SSR) en Static Site Generation (SSG)

Voor verbeterde SEO en initiële laadprestaties, overweeg het gebruik van SSR of SSG met frameworks zoals Next.js of Gatsby. Deze frameworks stellen je in staat om data op de server of tijdens de build-tijd op te halen en vooraf gerenderde HTML aan de client te serveren. Dit elimineert de noodzaak voor de client om data op te halen bij de eerste laadbeurt, wat resulteert in een snellere en meer SEO-vriendelijke ervaring.

7. Werken met Verschillende Router-types

React Router v6 biedt verschillende router-implementaties die geschikt zijn voor diverse omgevingen en gebruiksscenario's:

Kies het router-type dat het beste past bij de vereisten en de omgeving van je applicatie.

Conclusie

React Router v6 biedt een uitgebreide en flexibele routing-oplossing voor React-applicaties. Door de navigatiepatronen die in deze blogpost zijn besproken te begrijpen en toe te passen, kun je robuuste, gebruiksvriendelijke en onderhoudbare webapplicaties bouwen. Van declaratieve routing met <Routes> en <Route> tot dynamische routes met URL-parameters, programmatische navigatie met useNavigate, en effectieve datalaadstrategieën, React Router v6 stelt je in staat om naadloze navigatie-ervaringen voor je gebruikers te creëren. Overweeg het verkennen van geavanceerde routing-bibliotheken en SSR/SSG-frameworks voor nog meer controle en prestatie-optimalisatie. Onthoud om deze patronen aan te passen aan de specifieke vereisten van je applicatie en altijd prioriteit te geven aan een duidelijke en intuïtieve gebruikerservaring.

React Router v6: Navigatiepatronen voor Moderne Webapps Meester Maken | MLOG