---
title: "Hash routing"
slug: "hash-routing"
category: "glossary"
tags: ["glossary", "frontend", "routing", "spa", "navigation", "url"]
status: "stable"
last_updated: 2026-05-14
summary: "Hash routing stores the SPA route in the URL fragment (after #), enabling client-side navigation without server round-trips."
related:
  [
    "[[frontend/react]]",
    "[[frontend/nextjs]]",
    "[[glossary/virtual-dom]]",
    "[[seo/technical]]",
    "[[glossary/canonical-url]]",
    "[[frontend/astro]]",
  ]
---

## Overview

This page is the atomic definition. Routing patterns live at [[frontend/react]] and [[frontend/nextjs]].

## Definition

Hash routing encodes navigation state in the URL fragment, the string after `#` (e.g., `https://app.example.com/#/dashboard`). Browsers never send the fragment to the server, so all hash-route requests return the same root HTML document. A JavaScript router reads `window.location.hash`, maps it to a component, and renders it client-side. Advantages: works on static hosts with no server-side routing configuration and does not require a catch-all 404 handler. Disadvantages: the fragment is excluded from HTTP requests, so server-side analytics, Open Graph tags, and search-engine indexers cannot see per-route content reliably. Prefer History API routing (pushState) for any publicly indexable application. Hash routing remains useful for documentation anchors, in-page navigation, and apps deployed to CDNs that cannot configure fallback routes.

## When it applies

Use hash routing for single-page apps deployed to static hosts where configuring a catch-all route is not possible, or for in-page anchor navigation. Use History API routing for any app where SEO, social sharing, or server-side rendering matters.

## Example

```
https://docs.example.com/page.html#getting-started
```

Clicking a `<a href="#getting-started">` scrolls to the anchor and updates `location.hash` without a server request.

## Related concepts

- [[frontend/react]] - React Router supports both hash and history modes.
- [[frontend/nextjs]] - Next.js uses History API routing with file-system-based routes.
- [[seo/technical]] - hash URLs limit crawler access to per-route content.
- [[glossary/canonical-url]] - hash segments are excluded from canonical URL comparison.

## Citing this term

> See [[glossary/hash-routing|Hash routing]] (llmbestpractices.com/glossary/hash-routing).

## Related

- [[frontend/react]]
- [[frontend/nextjs]]
- [[seo/technical]]
- [[glossary/canonical-url]]
- [[glossary/virtual-dom]]