@modern-helpers/router
Minimalistic router for modern web apps.
↗️ Demos
Features
- ultra-light (< 3kb)
- it just use the History API
- you're free to use any route matching and rendering solution you want
- compatible with standard
<a>(anchor) elements- even with relative URLs
- even if the anchor is inside a Shadow DOM
- automatically handle "Go back" and "Go forward" in history (
popstateevents) - automatically detect and use
<base>element - preserve search parameters & history state objects
- provide
"navigation-start","navigation-end"and"route-redirection"events using the standard EventTarget interface
Usage example
HTML
<a href="/hello">Say Hello</a>
<a href="/bye/">Say Goodbye</a>
<a href="/unknown-path">Wrong link</a>
<div id="outlet">default view</div>JS
import { AbstractRouter } from "https://cdn.skypack.dev/@modern-helpers/router";
// or, using npm i @modern-helpers/router
// import { AbstractRouter } from "@modern-helpers/router";
const routerOutlet = document.getElementById("outlet");
function render(template) {
routerOutlet.innerHTML = template;
}
const ROUTES = {
"/": "<p>Home view</p>",
"/hello": `<p>Hello World!</p>`,
/** "directory" route for relative links */
"/bye/": `<p>Good bye!</p>
<p><a href="./soon">tell me more with a relative link</a></p>`,
/** "child" route */
"/bye/soon": `<p>Just a child route to say "see you soon".</p>`,
/** default route */
"/404": `<p>404: route not found</p>`,
};
class AppRouter extends AbstractRouter {
async renderOrRedirect(path, options) {
if (!Object.keys(ROUTES).includes(path)) {
// redirection to the default route
return ["/404", options];
}
render(ROUTES[path]);
}
}
async function runRouter() {
const appRouter = new AppRouter();
// listen clicks and popstate on body
// and run a first navigation using window.location.pathname
await appRouter.run();
}
runRouter();