0Pricing
HTML Academy · Lektion

Hash-basiertes gegenüber pfadbasiertem Routing

Vergleichen Sie Hash-Routing mit pushState-basiertem History-Routing

Hash-basiertes gegenüber pfadbasiertem Routing ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei Strategien für SPA-URLs

SPAs benötigen URLs, die der Browser nicht vom Server abruft. Dafür gibt es zwei Ansätze: Hash-basiert verwendet das Fragment (alles nach #), das der Browser nie an den Server sendet, und pfadbasiert verwendet den Pfad zusammen mit Tricks der History API.

Hash-basiertes Routing

URLs sehen beispielsweise so aus: https://example.com/#/about. Der Server sieht nur / und liefert für jede URL dasselbe HTML aus. Das clientseitige JavaScript liest location.hash aus, um zu entscheiden, welche Ansicht gerendert werden soll. Dieser Ansatz ist einfach und erfordert keine Serverkonfiguration.

Das hashchange-Ereignis

Hash-basierte Router hören auf das Ereignis hashchange, das immer dann ausgelöst wird, wenn sich location.hash ändert. Zusammen mit dem Auslesen von window.location.hash ist dies die gesamte API, die für clientseitiges Routing benötigt wird – die History API kommt dabei nicht zum Einsatz.

window.addEventListener("hashchange", () => {
  const route = location.hash.slice(1) || "/";
  renderPage(route);
});

Pfadbasiertes Routing

URLs sehen beispielsweise so aus: https://example.com/about – sie sind nicht von serverseitig gerenderten URLs zu unterscheiden. pushState aus der History API ändert den Pfad, ohne die Seite neu zu laden; bei Zurück- und Vorwärtsnavigation wird popstate ausgelöst; das Abfangen von Klicks macht aus <a> eine SPA-Navigation.

Serverkonfiguration erforderlich

Beim pfadbasierten Routing muss der Server für jeden Pfad, den ein Benutzer direkt eingeben oder aktualisieren könnte, die index.html der SPA zurückgeben. Andernfalls führt das Aktualisieren von /about zu einem 404-Fehler. Konfigurieren Sie den Server so: Zuerst die Datei versuchen und bei einem Fehlschlag auf index.html zurückfallen (History-Fallback in Nginx, vite-plugin-history-api in Vite Dev).

# Nginx config
location / {
  try_files $uri $uri/ /index.html;
}

SEO und Teilen

Suchmaschinen und viele andere Tools können Hash-Fragmente überhaupt nicht crawlen – Inhalte unter /#/about sind für ältere Crawler unsichtbar (Google verarbeitet sie über headless Rendering, andere möglicherweise nicht). Pfadbasierte URLs werden normal gecrawlt und sind daher für SEO eindeutig besser.

Wahrnehmung durch Benutzer

Hash-URLs wirken sichtbar „ungewöhnlich“ – Benutzer bemerken das # und vertrauen dem Link möglicherweise nicht oder denken nicht daran, die vollständige URL zu kopieren. Pfad-URLs sehen wie alle anderen Web-URLs aus, genau wie Benutzer es erwarten. Moderne SPAs entscheiden sich allein aus diesem Grund fast immer für pfadbasiertes Routing.

Komplexität der Implementierung

Hash-basiert: etwa 10 Zeilen JavaScript (hashchange-Listener + Rendern). Pfadbasiert: pushState-Aufrufe, popstate-Listener, Abfangen von Link-Klicks und serverseitiger Fallback. Hash ist die denkbar einfachste Wahl; der Pfad erfordert für eine bessere Benutzererfahrung mehr Infrastruktur.

Überlegungen zum statischen Hosting

Reine statische Hoster (die Standardkonfiguration von GitHub Pages) können keinen serverseitigen Fallback bereitstellen, daher schlägt pfadbasiertes Routing beim Aktualisieren fehl. Mögliche Lösungen sind Tricks mit einer 404.html, das Hosten auf Netlify oder Vercel (diese Dienste unterstützen SPA-Fallbacks) oder die Verwendung von Hash-basiertem Routing bei Projekten, die ausschließlich statisch gehostet werden.

Hybride Ansätze

Manche Apps kombinieren beides: Pfadbasiertes Routing für die Hauptroute und Hashes für Abschnitte innerhalb einer Seite (Modals, Tab-Anker). Das hashchange-Ereignis wird für diese Änderungen weiterhin ausgelöst und ergänzt den History-basierten Router um den Zustand von Unterseiten, ohne die Haupt-URL unnötig zu füllen.

Zwischen den beiden Ansätzen migrieren

Für die Migration von Hash zu Pfad schreiben Sie alle internen Links um, fügen Sie einen Server-Fallback hinzu, ersetzen Sie die hashchange-Logik durch popstate und leiten Sie alte Hash-URLs auf die entsprechenden Pfad-URLs um. Verwenden Sie dafür ein kleines Bootstrap-Skript, das einmal ausgeführt wird und history.replaceState aufruft.

Entscheidungskriterien

Wählen Sie Hash-basiertes Routing für statische Hoster ohne Rewrites, interne Administrationswerkzeuge, bei denen SEO keine Rolle spielt, sowie eingebettete Widgets. Wählen Sie pfadbasiertes Routing für alles, was Benutzer direkt verwenden, in Suchmaschinen indexiert werden oder in sozialen Medien geteilt werden soll – also für die meisten Apps.

Wissensprüfung

Warum erfordert pfadbasiertes SPA-Routing eine Serverkonfiguration, Hash-basiertes Routing jedoch nicht?

Zusammenfassung

Hash-basiertes Routing (URLs wie /#/about) benötigt keine Serverkonfiguration, bietet aber schwache SEO-Unterstützung und verwendet unschöne URLs. Pfadbasiertes Routing (URLs wie /about) benötigt einen Server-Fallback auf index.html, erzeugt dafür aber saubere, SEO-freundliche und gut teilbare URLs. Moderne, öffentlich zugängliche SPAs verwenden pfadbasiertes Routing; bei statisch gehosteten oder internen Projekten kann Hash für mehr Einfachheit weiterhin sinnvoll sein.

Häufig gestellte Fragen

Ist die Lektion „Hash-basiertes gegenüber pfadbasiertem Routing“ kostenlos?

Ja — der vollständige Text von „Hash-basiertes gegenüber pfadbasiertem Routing“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Hash-basiertes gegenüber pfadbasiertem Routing“?

Vergleichen Sie Hash-Routing mit pushState-basiertem History-Routing Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Hash-basiertes gegenüber pfadbasiertem Routing“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. pushState und replaceState
  2. Das popstate-Ereignis
  3. Hash-basiertes gegenüber pfadbasiertem Routing
  4. Die Navigation API in modernen Browsern
← Zurück zu HTML Academy