@gluonjs/core / packages/router/src / HistoryNavigation

Interface: HistoryNavigation

Properties

delta

readonly delta: number

---

direction

readonly direction: "forward" | "unknown" | "back"

---

savedPosition?

readonly optional savedPosition?: ScrollPosition

---

type

readonly type: "pop"

Example

Handle a back/forward event with its signed delta, direction, and optional saved scroll position:

import {
  createMemoryHistory,
  createWebHashHistory,
  createWebHistory,
  type HistoryListener,
  type HistoryLocation,
  type HistoryNavigation,
  type HistoryState,
  type RouterHistory,
  type ScrollPosition,
} from '@gluonjs/router';

const state = { source: 'catalog' } satisfies HistoryState;
const scroll = { left: 0, top: 640 } satisfies ScrollPosition;
const history: RouterHistory = createMemoryHistory(['/shop', '/products/42']);
const listener: HistoryListener = (to: HistoryLocation, from: HistoryLocation, navigation: HistoryNavigation) => {
  console.log(`${navigation.direction}: ${from.location} -> ${to.location}`, navigation.savedPosition);
};
const stop = history.listen(listener);
history.replace('/products/42?variant=blue', state);
history.saveScroll(scroll);
history.push('/bag');
history.go(-1);

const webHistory = createWebHistory('/shop');
const hashHistory = createWebHashHistory('/preview');
console.log(history.location, webHistory.createHref('/bag'), hashHistory.createHref('/bag'));
stop();
history.destroy();
webHistory.destroy();
hashHistory.destroy();