Module 18: Client-Side Routing | Web Dev for Beginners

"Ever notice how some sites switch 'pages' instantly, without a full reload? That's client-side routing — one page pretending to be many."

Learning Objectives

By the end of this module, you will be able to:

Explain what routing means
Tell server-side from client-side routing
Understand how a single-page app shows different "pages"
Know when routing is useful

1. What Is Routing?

Routing decides which content to show for which URL. Visit /login and you see the login screen; visit /dashboard and you see your account.

The URL is more than an address — it's a tiny instruction the user can bookmark, share, or reload. Good routing means that instruction always leads to the same place: send a friend /dashboard and they land exactly where you expected. Without routing, an app would be a single screen with no way to link directly to any part of it.

Key idea: Traditionally each URL loaded a whole new page from the server. Client-side routing flips this: JavaScript watches the URL and swaps the content on the same page — so navigation feels instant, with no full reload.

Explain like I'm new: Think of URLs as room numbers in a building. Routing is the receptionist who reads the number and points you to the right room. Server-side routing walks you to a brand-new room each time; client-side routing just redecorates the room you're already standing in.

2. Server vs. Client Routing

	Server-side routing	Client-side routing
Who handles it	The server sends a new page	JavaScript swaps content in the browser
Feel	Full page reload	Instant, app-like
Example	A classic blog	A single-page app (SPA)

Neither approach is "better" — they're trade-offs. Server-side routing sends a fresh, complete page each time (simple, and easy for search engines to read), while client-side routing avoids the reload for a snappier, app-like feel. Many large sites blend both: a server delivers the first page, then client-side routing takes over for everything after.

3. How a Single-Page App Routes

The idea is simple:

Keep several "views" (templates) hidden in your HTML or in JS.
Watch the URL (or a link click).
Show the view that matches the current route; hide the rest.

javascript

[object Object], ,[object Object],(,[object Object],) {
  ,[object Object], path = ,[object Object],.,[object Object],.,[object Object],;    ,[object Object],
  ,[object Object],();
  ,[object Object],(path || ,[object Object],);
}
,[object Object],.,[object Object],(,[object Object],, showRoute);

Here window.location.hash is the part of the URL after the # — like #dashboard. Because changing the hash doesn't trigger a page reload, it's the simplest way to track "where" the user is. The hashchange event fires every time that part changes, so showRoute runs, hides every view, and reveals only the matching one. In practice hideAllViews() might add a hidden class to every view and showView() remove it from just one — plain DOM work from Module 12.

The banking project uses exactly this pattern to switch between login, register, and dashboard "pages" without reloading.

Try this: Add #test to the end of any single-page app's URL and press Enter. Notice the page doesn't fully reload, yet the content may change. That's client-side routing reacting to the hash.

4. When Routing Helps

Routing shines for apps with multiple screens that share data (dashboards, multi-step forms). For a simple one-page site, you may not need it at all.

A good rule of thumb: reach for routing when users need to move between distinct "places" and expect the back button, bookmarks, and refresh to behave sensibly. A portfolio or landing page rarely needs it; a dashboard, a webmail client, or a checkout flow almost always does.

Real-world use case: Apps like Gmail, Trello, and Spotify's web player are single-page apps. Click around and the URL changes and the content swaps, but the page never fully reloads — that instant feel is client-side routing doing its job.

Beginner mistake: Trying to build routing before you're comfortable with the DOM and events. Routing is just "listen for a URL change, then show/hide the right view." Master Modules 12–13 first and this becomes easy.

Key Takeaway: Routing maps URLs to content. Client-side routing lets one page act like many — JavaScript watches the URL and swaps views instantly, no reload — which is how single-page apps (like the banking project) feel fast. It builds directly on the DOM and events you already know.

Further Learning

Adapted from Microsoft's Web Dev for Beginners (MIT License). Bank project from the source curriculum.