Routing

Routing

Routing

• Routing refers to the process of navigating between different sections or pages within a single-page application (SPA) without a full page refresh
  • Kort door de bocht:
    • State beschrijven in URL
    • State recreëeren wanneer iemand URL bezoekt
    • Resultaat: users belanden waar ze willen of moeten zijn

Routing

• Page in context van routing ≠ HTML-pagina
  • ​Single-page app (SPA): 1 HTML-pagina
    • Javascript zorgt voor de "navigatie"
  • ​Traditionele applicatie: meerdere HTML-pagina's
    • ​Webserver zorgt voor de navigatie

Routing

• Waarom routing?
  • Gebruiksvriendelijkheid
    • Links delen
    • Toevoegen aan bookmarks
    • Back/forward-knoppen in browser
  • Hot Module Reload/Replacement (HMR)
  • ...

Routing

• Waarom routing?
  • Lazy loading
    • ​Javascript wordt opgesplitst in kleinere chunks
    • Chunk wordt pas gedownload wanneer het betreffend deel van de app wordt betreden
    • Voordeel: kleinere initial bundle size​​
    • Alternatieve term: code splitting

Routing

• Is routing verplicht in een SPA?
  • Nee, maar vaak aangewezen
    • Use cases zonder routing bv. games
  • ​​Daarom niet standaard inbegrepen in React

Routing

TanStack Router

TanStack Router

• Waarom niet React Router?
  • TanStack Router:
    focus op client-side routing (SPAs)
  • React Router:
    focus op client-side EN server-side routing
    • Server-side routing​​: buiten scope van deze cursus

TanStack Router

• Waarom geen andere router?
  • Weinig andere opties beschikbaar
  • Minimale functionaliteit
  • Niet goed onderhouden
    • Belangrijk (!) omdat React regelmatig
      nieuwe versies uitbrengt 

TanStack Router

• Concepten
  • Outlet: waar je dynamisch componenten gaat inladen o.b.v. de route

TanStack Router

• Concepten
  • Loader: functie die wordt aangeroepen
    vóór de component laadt
    • Meestal om data op te halen
      • Ingebouwde caching
      • Sneller dan ophalen in de component
      • Aanbevolen indien data van cruciaal belang
    • Alternatieve term: resolver

TanStack Router

• Concepten
  • 404 page / not found component:
    wat je ziet wanneer de route niet bestaat

TanStack Router

• Concepten
  • File-based routing: structuur en naamgeving van files en folders bepaalt (deels) routing
    • Wij gebruiken steeds file-based routing, dit is ook de aanbevolen aanpak volgens de documentatie
  • Code-based routing: routing wordt geschreven
    in code

TanStack Router

• Getting started (docs)

TanStack Router

• We maken een voorbeeld: recepten-app met
  de free recipe API

TanStack Router

• Oefening:
  • {JSON} Placeholder API
    • /
      • Navigatie (Users, About) en een welkomstbericht

TanStack Router

• Oefening:
  • {JSON} Placeholder API
    • /users
      • Lijst van alle users met een link naar de
        detailpagina van een user (/users/:id)

TanStack Router

• Oefening:
  • {JSON} Placeholder API
    • /users/:id
      • Detailpagina van een user met adresgegevens (naam, adres, email, website link, email link, telefoon link)

TanStack Router

• Vervolg oefening:
  • {JSON} Placeholder API
    • /user/:id/albums​
      • Titel van alle albums voor een user

TanStack Router

• Vervolg oefening:
  • {JSON} Placeholder API
    • /user/:id/posts
      • Titel en body van alle posts voor een user

TanStack Router

• Vervolg oefening:
  • {JSON} Placeholder API
    • /about
      • ​Wat informatie over jezelf en deze oefening