BrowserHistory

Browser history stores the location in regular URLs. This is the standard for most web apps, but it requires some configuration on the server to ensure you serve the same app at multiple URLs.

The full documentation for BrowserHistory can be found here

Reference to source code

Usage

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

export const history = createBrowserHistory();

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 createBrowserHistory

locationUrl computed.struct

This property represents stringified version of the location property

Example:

/*
{ // 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:

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

const history = createBrowserHistory();

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

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

history.lastBlockedTx; // { // Transition

unblock();

history.lastBlockedTx; // null