@uxland/routing
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    UXL Routing npm version

    Build Status Statements Branches Functions Lines
    BuildStatus 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; //=> ''

    Keywords

    none

    Install

    npm i @uxland/routing

    DownloadsWeekly Downloads

    98

    Version

    1.0.3

    License

    BSD-4-Clause

    Unpacked Size

    127 kB

    Total Files

    94

    Last publish

    Collaborators

    • avizcaino
    • uxland-admin