Client-Side Routing
Traditional websites work simply: click a link, browser requests a new page from the server, server sends HTML, browser renders it. But single-page applications need a different approach. They load once and update dynamically — yet users still expect working URLs, back buttons, and bookmarkable pages.
Client-side routing makes this possible. The URL changes, the UI updates, but no request goes to the server for a new page.
How Client-Side Routing Works
When you click a link in a SPA, the router intercepts it before the browser can make a request. Instead, it:
- Prevents the default navigation
- Updates the URL using the browser's History API
- Determines which component should render for that URL
- Renders the appropriate component
The user sees the URL change and new content appear, but the page never actually reloads. This makes navigation feel instant.
Common Router Features
Modern routers handle more than simple page switching:
Route matching maps URLs to components. The path /about might render an AboutPage component.
URL parameters capture dynamic segments. The path /users/:id matches /users/123 and makes 123 available to your component.
Query parameters handle optional data. The URL /search?q=javascript&page=2 passes search terms and pagination.
Nested routes let parent layouts wrap child pages. A dashboard layout might contain different sub-pages without re-rendering the sidebar.
Route guards protect pages that require authentication. If a user isn't logged in, redirect them to the login page.
Framework Routers
Each framework has its preferred routing solution:
- React: React Router is the standard choice
- Vue: Vue Router integrates tightly with Vue
- Angular: Includes a powerful built-in router
- Svelte: SvelteKit provides file-based routing
Most routers work similarly. You define routes that map paths to components, then use special link components that trigger client-side navigation instead of full page loads.
When Server Routing Still Matters
Client-side routing has limitations. Search engines may struggle to index JavaScript-rendered content. The initial page load requires downloading your entire application. Deep links might not work if your server isn't configured correctly.
Many modern frameworks offer hybrid solutions — server-side rendering for the initial load, then client-side routing for subsequent navigation. This gives you the best of both worlds.