NavigationTransition.to — Eigenschaft · JavaScript-Referenz

Signatur

get NavigationTransition.to

Beschreibung

Die schreibgeschützte Eigenschaft to des Interfaces NavigationTransition gibt das NavigationDestination zurück, also das Ziel der gerade laufenden Navigation. Sie ist das Gegenstück zu NavigationTransition.from: from liefert den NavigationHistoryEntry, von dem aus navigiert wird, to das Ziel.

Ein NavigationTransition-Objekt gibt es nur, solange eine abgefangene Navigation läuft. Es entsteht, wenn ein navigate-Handler event.intercept() aufruft, und ist über navigation.transition erreichbar, bis die Navigation abgeschlossen oder abgebrochen ist. In dieser Zeit kann Code außerhalb des navigate-Handlers über navigation.transition.to das Ziel abfragen, etwa url, key, index, sameDocument oder mit getState() den Zustand. So müssen Komponenten das NavigateEvent nicht selbst speichern.

Typische Einsatzfälle:

Ladeanzeigen, die zeigen, wohin navigiert wird
Richtungsabhängige Übergangsanimationen, bei denen from.index mit to.index verglichen wird
Vorladen von Daten für die Zielroute aus beliebigen Modulen

Der Wert ist dasselbe Objekt wie NavigateEvent.destination der zugehörigen Navigation.

Rückgabewert

Typ

NavigationDestination

Beschreibung

Das Ziel der laufenden Navigation mit den Eigenschaften url, key, id, index, sameDocument und der Methode getState(). Bei einer push- oder replace-Navigation ist key ein leerer String, id ebenfalls, und index ist -1.

Beispiele

Ziel-URL der laufenden Navigation auslesen

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;
  event.intercept({
    handler: async () => {
      // Irgendwo im Code, ohne Zugriff auf das Event:
      const ziel = navigation.transition?.to;
      console.log('Navigiere zu:', ziel?.url);
      await renderRoute(new URL(event.destination.url).pathname);
    }
  });
});

const renderRoute = async (pfad) => {
  document.querySelector('main').textContent = `Seite: ${pfad}`;
};

Navigiere zu: https://example.com/produkte

Ladeanzeige mit Zielangabe

const zeigeLadeanzeige = () => {
  const transition = navigation.transition;
  if (!transition) return;

  const zielPfad = new URL(transition.to.url).pathname;
  const hinweis = document.querySelector('#lade-hinweis');
  hinweis.textContent = `Lade ${zielPfad} …`;
  hinweis.hidden = false;

  // finished wird erfüllt oder abgelehnt, sobald die Navigation endet
  transition.finished
    .catch(() => {})
    .finally(() => { hinweis.hidden = true; });
};

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;
  event.intercept({ handler: () => new Promise((r) => setTimeout(r, 500)) });
  // intercept() wurde aufgerufen, navigation.transition ist nach dem Handler-Start gesetzt
  queueMicrotask(zeigeLadeanzeige);
});

Richtung für Übergangsanimationen bestimmen

const ermittleRichtung = () => {
  const t = navigation.transition;
  if (!t || t.navigationType !== 'traverse') return 'vorwärts';
  return t.to.index < t.from.index ? 'zurück' : 'vorwärts';
};

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;
  event.intercept({
    handler: async () => {
      const richtung = ermittleRichtung();
      document.documentElement.dataset.richtung = richtung;
      console.log('Animationsrichtung:', richtung);
    }
  });
});

// Test: im Verlauf zurückgehen
// navigation.back();

Animationsrichtung: zurück

Feature-Erkennung mit Rückfall auf event.destination

const hatTransitionTo =
  'NavigationTransition' in window &&
  'to' in NavigationTransition.prototype;

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;
  event.intercept({
    handler: async () => {
      const ziel = hatTransitionTo ? navigation.transition.to : event.destination;
      console.log(ziel.sameDocument, ziel.url);
    }
  });
});

true https://example.com/kontakt

// Wichtig · Fallstricke

Kompatibilität: Die Navigation API selbst gibt es nur in Chromium-Browsern (Chrome/Edge ab 102) und in neueren Versionen von Firefox und Safari. NavigationTransition.to kam erst später hinzu und ist experimentell. Prüfen Sie die Unterstützung mit 'to' in NavigationTransition.prototype und greifen Sie sonst auf NavigateEvent.destination zurück.
navigation.transition ist oft null: Das Objekt existiert nur, solange eine Navigation läuft, die mit intercept() abgefangen wurde. Nicht abgefangene, bereits abgeschlossene oder abgebrochene Navigationen haben kein transition. Verwenden Sie deshalb optionale Verkettung (navigation.transition?.to).
index und key: Nur bei traverse-Navigationen verweist das Ziel auf einen vorhandenen Verlaufseintrag. Bei push/replace ist index gleich -1, und key/id sind leer. Richtungsvergleiche sind also nur bei traverse sinnvoll.
Kein Verlaufseintrag: to ist ein NavigationDestination und kein NavigationHistoryEntry. Es hat also kein dispose-Event und keine sameDocument-Garantie über das Ende der Navigation hinaus. Den endgültigen Eintrag liefert nach Abschluss navigation.currentEntry.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird still ignoriert, im Strict Mode löst sie einen TypeError aus.

Siehe auch

NavigationTransition.from NavigationTransition.committed NavigationTransition.finished NavigationTransition.navigationType Navigation.transition