Exalt Router

A simple client side router for exalt apps.

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.