UXL Routing
Build Status | Statements | Branches | Functions | Lines |
---|---|---|---|---|
Installation
npm i @uxland/routing
Usage
Initialization
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>;
router.registerRoutes({
route: "dummy/:id",
hooks: { canNavigateFrom, canNavigateTo, navigatedFrom },
});
canNavigateFrom
This hook is executed before navigation happens and it is used in order to check if it is possible to navigate from current route.
canNavigateTo
This hook is executed before navigation happens and it is used in order to check if it is possible to navigate to new route.
navigatedFrom
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`));
router.navigate("foo");
//=> Console output: "foo not registered"
Navigate
Use navigate method to change location:
router.navigate("dummy");
router.navigate("http://localhost/dummy");
Last resolved url
After navigation happens (successfully or not), last resolved url is stored
const router = new Router([{ route: "dummy" }]);
router.navigate("dummy");
console.log(router.lastResolvedUrl); //=> 'dummy'
Destroy
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.navigate("dummy");
router.lastResolvedUrl; //=> 'dummy'
router.destroy();
router.getRoutes(); //=> []
router.lastResolvedUrl; //=> ''