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

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)

npm create vite@latest tanstack-router-example1 -- --template react
npm install @tanstack/react-router @tanstack/react-router-devtools
npm install -D @tanstack/router-plugin

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