Routing

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

  • Installatie
    • Manual setup (in een bestaand React-project)
      met file-based route generation
      • src/routes/__root.tsx → root layout
      • src/routes/__index.tsx → homepage
      • routeTree.gen.ts → nooit manueel aanpassen!

TanStack Router

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

TanStack Router

  • Concepten
    • Outlet: waar je dynamisch componenten gaat inladen o.b.v. de route
      bijvoorbeeld:
<div id="main-grid">
	<aside>
		<Navbar courses={data ?? []} />
	</aside>
	<main>
		<Outlet />
	</main>
</div>

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
    • Code-based routing: routing wordt geschreven
      in code

TanStack Router

TanStack Router

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

TanStack Router

TanStack Router

Made with Slides.com