Skip to content

HashHistory ​

Hash history stores the location in window.location.hash. This makes it ideal for situations where you don't want to send the location to the server for some reason, either because you do cannot configure it or the URL space is reserved for something else.

The full documentation for HashHistory can be found here

Reference to source code

Usage ​

ts
import { createHashHistory } from "mobx-location-history";
import { reaction } from "mobx";

export const history = createHashHistory();

reaction(
  () => history.location.pathname,
  pathname => {
    console.log(pathname);
  }
)

history.push()

MobX modifications ​

location: Location observable.deep ​

Original location property wrapped in observable
See documentation here

action: Action observable.ref ​

Original action property wrapped in observable
See documentation here

isBlocked: boolean computed.struct ​

This property is needed to detect block statement provided by original history package

blockersCount: number observable.ref ​

This property is needed to detect block statement provided by original history package

destroy() ​

This method is needed for destroy all subscriptions and reactions created inside function createHashHistory

locationUrl computed.struct ​

This property represents stringified version of the location property

Example:

ts
/*
{ // location
  pathname: '/en-US/docs/Location.search',
  hash: '',
  search: '?q=123'
}
*/
history.locationUrl; // '/en-US/docs/Location.search?q=123'

lastBlockedTx: Transition | null observable.ref ​

Last blocked transition.
This property is helpful if you want to watch about blocked history transitions while history is blocked.
More information about blocking history you can find here

will be null if history is not blocked

Example:

ts
import { createBrowserHistory } from "mobx-location-history";

const history = createBrowserHistory();

...
const unblock = history.block(() => {
  //
})
...

history.push('/foo/bar');

history.lastBlockedTx; // { // Transition

unblock();

history.lastBlockedTx; // null