9 Client-side routing

 

This chapter covers

  • “Manual” routing
  • Hash routing
  • Using the page.js library for routing
  • Other routing options

Client-side routing is the ability to navigate between the pages of a web application. There are many things that can trigger a route change:

  • The user clicks a link or button.
  • The application programmatically changes the route based on the current state of the app.
  • The user manually modifies the URL in the browser’s address bar.

Sapper, which builds on Svelte, provides a routing solution that is generally easier to use than adding routing to a Svelte app. This approach will be covered in chapters 15 and 16.

If you do not wish to use the other features that Sapper provides, or you wish to use a different routing approach, there are many ways to implement routing in a Svelte application. Several open source libraries support routing in Svelte. Another option is to use hash routing, which takes advantage of the hash portion of URLs and doesn’t require installing a library. The easiest approach, however, is to simply choose a “page” component to render in the topmost component. We’ll call this the “manual” approach.

We will start by exploring the manual approach before moving on to hash routing and using the page.js library. Then we will look at how to implement hash routing and routing with page.js in the Travel Packing app.

9.1 Manual routing

9.2 Hash routing

9.3 Using the page.js library

9.4 Using path and query parameters with page.js

9.5 Building the Travel Packing app

Summary