Nemo's Parental Misguidance

    @exalt/router
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Exalt Router

    A simple client side router for exalt apps.

    Actions License Donate Follow Us


    Installation

    You can install @exalt/router using npm:

    npm install @exalt/router
    

    Getting Started

    @exalt/router comes with 3 components to handle client side routing.

    • exalt-router
    • exalt-route
    • exalt-link
    • exalt-redirect

    Exalt Router

    The exalt-router component is used to handle all the routing. It parses the routes behehind the scenes and will use push state routing by default. If you want to use hash routing, you can set the hash attribute to enable it.

    If you want to programatically change the route, ExaltRouter exposes a static navigate method.

    import { ExaltRouter } from "@exalt/router";
    
    ExaltRouter.navigate("/about");

    Exalt Route

    The exalt-route component is used to define a route and assign a component to it. It takes two attributes, url and component.

    Parameters are path fragments that are prefixed with a colon and if you want the parameter to be optional you can end it with a question mark. Any route parameters get passed as attributes on the rendered component.

    When defining a default route to render if there is no match, just omit the url attribute.

    When you want to split the bundle at the route level, you can add an onresolve event.

    html`<exalt-route url="/" component="home-page" onresolve=${() => import("@pages/home-page")} />`

    Example

    <exalt-router>
        <exalt-route url="/" component="home-page" />
        <exalt-route url="/about" component="about-page" />
        <exalt-route url="/about/:topic?" component="about-page" />
        <exalt-route component="not-found" />
    </exalt-router>

    Exalt Link

    The exalt-link component is used to wrap an anchor tag and change its default behavior to use client side routing. This ensures that in server side rendered environments the routing still works without JavaScript. The exalt-link component only takes a url attribute which is passed as an href attribute to the child anchor tag.

    Example

    <exalt-link url="/about">
        <a>About<a>
    </exalt-link>

    The anchor tag does not need to be a direct child of the exalt-link component, the component will just grab the first anchor tag it finds and enable client side rendering on it.

    Exalt Redirect

    The exalt-redirect component is used to conditionally redirect to another page or website. As soon as the component is rendered it will determine how to redirect based on the url attribute and then the page will be redirected.

    Example

    <exalt-redirect url="/redirect-route" />

    Reporting Issues

    If you are having trouble getting something to work with exalt or run into any problems, you can create a new issue.

    If this framework does not fit your needs or is missing a feature you would like to see, let us know! We would greatly appreciate your feedback on it.


    License

    Exalt Router is licensed under the terms of the MIT license.

    Install

    npm i @exalt/router

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • jleeson