Client-Side Routing

Client-side routing means the browser's JavaScript, not the server, decides which view to show for a URL. When a user clicks a link, the router intercepts it, updates the address bar using the History API (pushState) and renders the matching component, without requesting a new HTML document.

Why it matters

It makes navigation feel instant and preserves application state, which is why single-page applications use it. The costs are SEO and server configuration. If the user reloads /settings or opens it directly, the server receives a request for a path that has no file, so it must serve the app's index.html for unknown routes. Otherwise visitors see a 404. Status codes are also harder: a "not found" view is often returned with 200.

Example

document.querySelector("a.nav").addEventListener("click", (e) => {
  e.preventDefault();
  history.pushState({}, "", "/settings");
  renderRoute(location.pathname);
});
window.addEventListener("popstate", () => renderRoute(location.pathname));

Libraries such as React Router and Vue Router wrap this logic.

Common mistakes

• Missing a server fallback rule, so deep links return 404.
• Soft 404s: a missing page that returns 200.
• Not updating the document title or focus after navigation.
• Links built as buttons, which breaks open-in-new-tab.

Related

• Single-page application
• Server-side rendering
• 404 page
• React

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.