Routing library

Usage no npm install needed!

<script type="module">
  import uxlandRouting from 'https://cdn.skypack.dev/@uxland/routing';


UXL Routing npm version

Build Status Statements Branches Functions Lines
BuildStatus Statements Branches Functions Lines


npm i @uxland/routing



Create an instance of router. The constructor accepts three parameters: routes array, router root url and hash character.

const routes: Route[] = [{ route: "dummy" }, { route: "foo" }];
const router = new Router(routes);

Registering routes

It is possible to register new routes at any moment using provided registerRoutes function. It accepts a single route or an array of routes:

router.registerRoutes({ route: "bar" });
router.registerRoutes([{ route: "qux" }]);

Get registered routes

const router = new Router([{ route: "dummy" }]);
console.log(router.routes); //=> [{route: 'dummy'}]

Dynamic routes

It is possible to define dynamic routes with parameters:

router.registerRoutes({ route: "dummy/:id/:action" });

// When navigating to dummy/foo/bar, parameters are:
// id: foo
// action: bar

Route hooks

Route can have before and after navigation hooks that determine the possibility of navigation by returning a boolean promise and follow the next interface:

export type HookFn = (
  url: string,
  params: RouteParams,
  queryString: RouteQueryString
) => Promise<boolean>;

  route: "dummy/:id",
  hooks: { canNavigateFrom, canNavigateTo, navigatedFrom },

This hook is executed before navigation happens and it is used in order to check if it is possible to navigate from current route.


This hook is executed before navigation happens and it is used in order to check if it is possible to navigate to new route.


This hook is executed after navigation happends and it is used as a callback function to be executed to perform actions after navigation has been completed.

Not Found Handler

When navigating to a route that is not registered, it is possible to provide a handler that will be executed:

const router = new Router([{ route: "dummy" }]);
router.notFound((url: string) => console.log(`${url} not registered`));
//=> Console output: "foo not registered"


Use navigate method to change location:


Last resolved url

After navigation happens (successfully or not), last resolved url is stored

const router = new Router([{ route: "dummy" }]);
console.log(router.lastResolvedUrl); //=> 'dummy'


Resets router instance by emptying registered routes and last resolved url

const router = new Router([{ route: "dummy" }, { route: "foo" }]);
router.getRoutes(); //=> [{route: 'dummy'}, {route: 'foo'}]
router.lastResolvedUrl; //=> 'dummy'
router.getRoutes(); //=> []
router.lastResolvedUrl; //=> ''