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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.