GLUON / DOCS Playground

@gluonjs/router

@gluonjs/router / packages/router/src / createWebHashHistory

Function: createWebHashHistory()

createWebHashHistory(base?, targetWindow?): RouterHistory

Parameters

base?

string = '/'

targetWindow?

Window = window

Returns

RouterHistory

Example

Synchronize navigation with the URL hash when the server cannot rewrite application routes, then dispose the owned browser listeners:

ts
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();