chapter ten

10 Navigation

 

This chapter covers

  • Understanding routing as coordination between the URL, the browser, the server, and the application.
  • Designing friendly, shareable route paths.
  • Supporting deep links from the server.
  • Intercepting navigations with modern APIs and History API fallbacks.
  • Matching routes with URLPattern fallbacks.

Unless we are talking about a single document web app, most projects will involve different screens, views, pages or however you want to call the ability to render different content for different use cases in the same web app. This is where navigation comes in place and where routing makes it possible.

Navigation is the ability to move between those different screens and the router is an object with the ability to detect user’s expectation on what should be rendered at one particular moment of the web app and matches that expectation (expressed in the URL as a route) to a view, page, document or screen. Navigation and routing is usually introduced as a client-side concern: change the URL, render a view, move on. In real web projects, routing is broader than that, involving different navigation techniques.

10.1 Navigation and routing on the Web

10.1.1 Discoverability, accessibility, and graceful degradation

10.1.2 Native navigation

10.1.3 Client-side router

10.1.4 Navigation and routing definitions

10.1.5 Friendly URLs

10.1.6 Real URLs

10.1.8 URL parts

10.1.9 Route

10.1.10 Canonical route shapes

10.1.11 Route state

10.2 The server

10.3 Navigation interception

10.3.1 Navigation entry list

10.3.2 The Navigation API

10.3.3 Cancellation with event.signal

10.3.4 Form submissions

10.3.5 Observing completion

10.3.6 History API fallback

10.4 Route matching

10.4.1 Simple matching

10.5 Summary